How to set minimum width for switch to mobile (stacked block) view

Site URL: https://www.zooperfit.com/

Hi there,

I would love to know if there's a way to set a minimum width for my design to switch over to stacked block view (mobile settings)? This is for a 7.1 site. And my issue is that I have side-by-side text blocks, with buttons that all align nicely -- until the window size is reduced to a certain point, at which it starts to get wonky and goes out of alignment.

I'd love to be able to set a minimum width for the window (or for the individual blocks) where the view would convert over to the mobile view (stacked blocks).

Thank you!

Best,

Carolyn

SS 7.1 doesn't have this setting. You can try CSS to adjust layout on other devices (mobile, tablet,..)

If you can describe your request, I can take a look

Hi @tuanphan - thank you very much! I would love if you'd be able and willing to take a look - that's very generous of you.

I'm not sure if there's a solution for desktop using CSS... the issue is when the window size is in that middle zone, the spacing goes wonky.

I'm really at a loss for how to describe my issue, because I'm not versed in coding/CSS/any of this.. but I'll try below. Hoping this will make sense.

Site URL: https://www.zooperfit.com/

This is how it looks when the window is large:

But then when the window size gets smaller, it turns to this, and the alignment goes uneven.

I'm trying to make it convert over to a stacked layout once it reaches a certain width, so it won't appear misaligned.

The mobile view seems to be fine. I'm not sure how it looks on tablet.

Thank you so much for your response, and if you're able to help/advise that would be incredible.

Thanks again,

Carolyn

Carolyn