You’ve created your page - with all looking fine and dandy, till you check your page on a mobile. The Pages Editor is designed so that you should be able to go a long way without needing to consider mobile. Grid columns automatically stack by default, images automatically scale down to replicate the Desktop view for example. That said, you may find that what looks great on the desktop, may not play nice on the mobile - and for this, the Pages Editor offers a range of features to account for this. Let’s look at a few:

Let’s say you’ve created a 4 column grid, with each column containing an image:
​ 
​

​ 
​ 
​ 
 Now, without the ‘stacking’ option, the Grid will render the same on Mobile. In some cases, this’ll work, but you may find that it all feels a little squashed. The ‘stacking’ setting for a Grid Block allows you to specify that a Grid’s should be limited to displaying a set number of columns on a mobile.
​ 
​

​ 
​ 
 After having saved your changes, you’ll see your Grid will rendering as follows a mobile:
​ 
​

 The space available for Text on mobile is limited, and you may find yourself in a position where text wraps awkwardly or fails to even fit within the container it sits within. A solution we’ve provided for this, is the ability to completely control what text is shown when viewed on a mobile. This allows you to shorten the message, or replace it all together - along with the ability to apply mobile specific formatting to the text.
​ 
​

​ 
 As an example, let’s say we have the above Grid, which has two columns, each containing an Image with an Overlay. The overlay text looks great on a desktop, but by default, this is the result you’ll have a on a mobile:
​ 
​

​ 
 A little crowded, so how can we resolve this? In this case, we’ll want to shorten the message. Click to select the Text (a Text Overlay) in this case - and click disable the ‘Mobile match Desktop’ option. This will now allow you to modify the overlay for Mobile, independent of what’s shown on the Desktop.
​ 
​

​ 
 From here, click to switch to the Mobile preview mode by clicking the Mobile icon as shown in the screenshot below. Now, go ahead and change the text as per normal - and be able to flick back and forth between the Mobile and Desktop preview mode, and see that they remain independent.
​ 
​

In this example, we’ve shortened the messages for Mobile to simply ‘Available now’ and ‘Coming soon’. The result can be seen below, a setup that looks and works better on the mobile - but still displaying the full message when viewed from a Desktop: