Responsive style, viewport sizes

I’m not understanding how the responsive styling works I guess…I click the icon on the left that makes the various 5 media screen sizes show up…but when I enter (adjust) my styles, it changes it for ALL the viewports. How do I specific font and header etc sizes for each of the viewports? Do I have to do it in the CSS? If so, what’s the point of the viewport tool? I’m sure I’m just missing something simple…

Hello @Donnas,

Thanks for writing in! The viewport tool will allow you to preview your page in different screen sizes. Editing an element or section will still apply the changes to all screen sizes. If you want to display specific layout for select screen sizes, you can always create a separate section, row or columns that will only be visible on that particular screen and hidden in some screen sizes. You can hide/show a section, row, columns or elements by utilizing the “Hide During Breakpoints” option. To know more about it, please check this out: https://theme.co/t/hide-during-breakpoint-explained/17378

Hope this helps.

The link doesn’t take me to anything…

Hey @Donnas,

Sorry for the link. Here it is again: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.