How to do different layouts on different resolutions?

The responsive functionalists in Webflow is great, but sometimes I want to do more than just stacking the elements when the site is viewed on a mobile device.

In the example bellow the red text change position from inside the hero section on desktop resolution to bellow the hero section on mobile resolution, inside a new section that in not showing in desktop resolution. Is this possible and what is the best metode to do this?

For this precise scenario, abandon the position:relative attribute of the container, that serves as a reference for the absolute positionning of the lorem block, cancel the absolute of the lorem, and suddenly gray block and lorem block are inline, I mean one on top tf the other.

The structure is:

div container
— grey block
— lorem

http://vincent.polenordstudio.fr/snap/g7ywj.jpg

Lorem will position regarding container, and when pos values are canceled, will display along the grey/green dic (after)

1 Like

Thanks for your reply @vincent

I just realized that this is very easily done with the “Visible on:” function under Settings! :smiley:

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