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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.