Mobile screen size

Support
#1

Hi There,

I am new to Pro and its page builder, so my question maybe is very obvious with the answer but I am going to ask it anyway. As far as I understood there are two ways to edit the design for smaller screen sizes: 1) duplication element, changing its attributes and then use show/hide in different screen sizes 2) using @media CSS code.

Am I correct? or is there any easier way to do that? I used to work with Elementor page builder and it had an option for any screen sizes but I could not find similar things like that in the cornerstone.

#2

Hello Jamil,

Thanks for writing in!

The mobile layout of your page depends on the setting of the columns. If you are using the new Grid layout, you should be able to modify the column set up for a specific screens. With the default row-column layout, the columns will automatically collapse so basically the elements on the page will just be stacked below each other.

Perhaps this video tutorials may help you:

Hope this helps.

#3

Thank you for the reply and provided links. I like how the Grid System works, just to be sure about the “text” element do I have to use the show/hide technique for different screen sizes? if yes, is there any plan in the future updates to make it easier?

Thank you.

#4

Hey Jamil,

I believe you’re looking for “per screen size” options. Regretfully, that’s currently only available for the layout options of the New Row element and The Grid element.

The rest would require the use of the Hide During Breakpoints option.

For texts though, you can use the Responsive Text feature or fluid typography font size value. You can learn them from the videos below.

Hope that helps.

#5

Thank you so much.

#6

You’re welcome, Jamil.

1 Like
#7

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