Jump to content

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

Recommended Posts

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

Mobile view - great.png

Not aligned1.png

Not aligned2.png

Three columns aligned - great.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

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:

image.thumb.png.5c368cc8f4fb42b5e9096336ff04552a.png

 

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

image.png.00c52d8e1caa86eab0268f1842dfde3c.png

 

 

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

image.png

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.