Skip to main content

Adjust content for responsive screen widths

Our page builder uses four breakpoints for content that you can use to change the design and layout of your pages based on small, medium, large, and extra large screen widths. By default, we set our breakpoints at 480px and 960px. Any screens below 480px are considered small screens, 480px-960px are medium screens, and 960px and up are large screens. Most of our layouts set the content max width at 1440px as well, so on screens wider than 1440px, the content will remain at 1440px while the backgrounds may stretch from edge to edge. Here’s how you can customize the content in the page builder based on responsive screen sizes.

Setting different font sizes for responsive screen sizes​

Heading modules are a common spot where you might want to set different values for different screen sizes. For instance, a large heading might look great at 96pt font when viewed on a large screen. Check out what 96pt looks like on each screen size below: 😍

But when viewed on a medium size device, things get a little dicey at 96pt. 🧐

And they get even worse on a small screen… 😱

Well, if we could change the font size for each screen width, that would really go a long way toward solving the problem. The good news is, we can! 🥳 Here’s what it looks like with 64pt on medium devices and 32pt on small devices…

That’s a lot better now, isn’t it? 👍

How to do it…

  1. Open the page builder just like you would to edit the content.
  2. Anywhere you see a small desktop computer icon 🖥 in the builder interface, you can edit those values on a per-device basis. Click on that icon to toggle between device widths.
  3. Toggle back and forth and check everything to make sure it’s working as expected. Some values can’t be set per-device, so we always suggest double checking your large device size before you’re totally done just to be sure.
note

You can also access responsive editing by pressing 🆁 when the page builder is open (and you aren’t currently active in a text field). Or you can find a Responsive Editing option in the Page Builder top left dropdown after the page builder has been launched.