How to control the behaviour of elements in a section on different devices?

[clarita]

Hi,

Our site https://claritasolutions.com has a section containing a call-to-action that spans the full width of the page as a divider between sections. The page template is “Blank - No Container | Header, Footer”.

It looks fine on a big screen:

On a mobile phone though, the elements don’t quite behave as I would expect:

Can I set it up so that when viewed on a mobile device the image displays on top with the text elements underneath to make better use of the smaller screen width? I’ve played around a bit but can’t quite work out how to do it.

Many thanks!

[ruenel]

Hello @clarita,

Thanks for writing in!

You are having the issue because you did not set a Column Layout on smaller screens responsively. To do that, click the Row element and in your Row > Layout, click the “Template” to set up the layout on the different breakpoints.

To know more about the Responsive Element Styling, kindly check this out:

• https://theme.co/docs/responsive-styling

Best Regards.

[clarita]

Thank you so much - exactly what I was looking for. I had no idea the “side labels” were clickable to control responsiveness down to individual elements.

[prakash_s]

Hello @clarita,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks