Show breakpoint in browser

Tips and Tricks
1

Hi,

I like to test my site’s responsiveness, by dragging its window continuously wider and less wide. I use this code in my header (can be added through page settings) to dynamically display the current breakpoint (LG, MD, SM, XS) in an overlay box in the upper left corner. Maybe it’s useful for someone of you.

<style>
body::after {
  content: 'DEFAULT';
  position: fixed;
  top: 1rem;
  left: 1rem;
  background: white;
  color: black;
  padding: 3px 6px;
  border-radius: 5px;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  z-index: 9999;
  pointer-events: none;
  border: 1px solid black;
}

/* XS (0px → 576px) */
@media (min-width: 0px) {
  body::after { content: 'XS'; }
}

/* SM (576px → 767px) */
@media (min-width: 576px) {
  body::after { content: 'SM'; }
}

/* MD (768px → 991px) */
@media (min-width: 768px) {
  body::after { content: 'MD'; }
}

/* LG (992px and higher) */
@media (min-width: 992px) {
  body::after { content: 'LG'; }
}

}
 </style>

Best regards,
Markus

image
image1182×930 113 KB

7 Likes
2

Someone could easily make this into a Custom Bric as well, handy tip.

2 Likes
3

Wow, thank U very much, it’s so useful!

4

/* BreakPoints (0px → Higher) */

<style>
/* Body after content display for breakpoints */
body::after {
  content: 'DEFAULT';
  position: fixed;
  top: 1rem;
  left: 1rem;
  background: white;
  color: black;
  padding: 3px 6px;
  border-radius: 5px;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  z-index: 9999;
  pointer-events: none;
  border: 1px solid black;
}
/* XS (0px → 576px) */
@media (min-width: 0px) and (max-width: 576px) {
  body::after { content: 'XS'; }
}
/* SM (576px → 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  body::after { content: 'SM'; }
}
/* MD (768px → 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  body::after { content: 'MD'; }
}
/* LG (992px → 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  body::after { content: 'LG'; }
}
/* XL (1200px → 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  body::after { content: 'XL'; }
}
/* XXL (1400px and higher) */
@media (min-width: 1400px) {
  body::after { content: 'XXL'; }
}
</style>
1 Like
5

Sorry if this is covered somewhere else, but is there anyway to wrap this so that it’s only is shown when viewing the page under Blocs in preview as well as when serving pages as a “server”?

Also it would be great to be able to add this header across all pages, almost like a header global in the project settings. Maybe a feature request for @Norm? But at this point, it would almost make more sense simply to bake this into Blocs itself for preview and “server” mode.

6

Also it would be great to be able to add this header across all pages

To achieve this, put it in the code editor: Window → Code Editor → Additional CSS (without the style tags)

is there anyway to wrap this so that it’s only is shown when viewing the page under Blocs in preview as well as when serving pages as a “server”

Don’t know how to achieve this. But my workflow is to use this code when I test/develop the breakpoint behavior. Once it’s fixed, I just comment out the code (/* .. */) and comment it in next time I need it. IMHO a feasible manual workaround.

2 Likes
7

@KBConcepts I think your addition forgets Blocs stance, choosing not to support Bootstraps official XL and XXL breakpoints. :wink:

https://forum.blocsapp.com/t/the-xl-breakpoint-dun-dun-duuuun/6182

https://forum.blocsapp.com/t/xxl-breakpoint/23294/2

1 Like
8

This type of approach has been around for sometime. Though in general, for a bric or a baked in app feature its better to instead use javascript as there is far more flexibility and potential.

1 Like
9

I found this on the second link. How does that fit into these large screen displays, say 55” and up?

Width

The width option lets you set the maximum width that your site will stretch to fit. By default it’s set to 1170px, this means once the width of the browser it’s being viewed in is 1170px wide your website will no longer grow in width to fill the available space. Instead, it will remain at 1170px wide, but horizontally centre in the middle of the available space, within the browser window.

This value can be set to anything, for example: if you want your site to fill the browser edge to edge no mater what size the browser window is, you would change this value to 100%;

1 Like
10

Your current options with Blocs are just as mentioned in that second link and documentation link, set a max width which centers or 100% which scales. If you have questions or concerns about this then its probably best to ask in that older thread which you started.

1 Like