Create different layout based on device

If your popup layout for desktop does not work/fit on mobile you might want to show a different layout of the same widget on mobile. You can do this by setting the visibility for each widget so that some only show for a certain device. 

Lets say that you have a popup with a big landscape image that looks great on desktop. This however might not look that great on mobile as portrait orientation is a better fit for a mobile screen. Then you might want to add two different image widgets that is set to different images (with different orientation).

If you have a whole different layout for each device you can use either a Block widget or a Column widget to group widgets that will be shown for each device and set visibility for that widget, which will make all child widgets have the same visibility mode (as done with columns in below image). 


In the example above we have different layout for desktop/tablet and mobile. On desktop/tablet we use a column layout where the input field and the submit button is horizontally aligned, whereas in the layout for mobile these are on separate rows (see image below).



You can quick view how the layout would look by changing visibility mode in the editor bar in the bottom. Notice that this only show the widgets that will be shown for that device and not how the popup will look for the end-user. To see these please use Preview and the browsers device simulator (remember to reload after changing device to get the correct version) or send the preview link to your own device. See Preview projects if you don't know how this is done.



Here is a preview of how the mobile version would look in this example.



Was this article helpful?
0 out of 0 found this helpful