DrCustUmz

Administrator

Online now
Joined Oct 2020
Administrator Post
This handy snippet will help you when creating bootstrap themes. It will add a small block to the top left of your page that will show you what screen size you are in. Simply resize your window and use the size shown to help you make any changes such as visibility, and columns.
No sizes need changed, these are the sizes defined by bootstrap.

Installation:
Add it to your additional css.

/* debug size*/
body::before {
  content: "xs";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  background-color: #000;
  color: #fff;
}
@media (min-width : 768px) { 
  body::before { 
    content: "sm"; 
  }
}
@media (min-width : 992px) { 
  body::before { 
    content: "md"; 
  }
}
@media (min-width : 1200px) { 
  body::before { 
    content: "lg"; 
  }
}
Attached Thumbnails
2021-02-02_15-45-37.png