Jump to content

Layout changes based on screens size

Recommended Posts

Site URL: https://brendaweicai.com

Hello all! 

I've been working on my portfolio on my 32" monitor and realized that the layout is completely different after moving the browser to my 13" laptop. The spacing is super weird, not to mention the text columns that I can't seem to make it uniform. I've tried editing from my laptop instead of the monitor but obviously then everything is weird when I move it to my monitor.

I did figure out(with the help of this forum) that it's affecting buttons when the blocks are overlapped. When I went to my individual case study(https://www.brendaweicai.com/eatunbound) to fix the overlapping blocks and resize them to fix the spacing, the text blocks are STILL adjusting themselves as I move it laptop to monitor. This is still making weird spacing. 

The first pic is the after I've made sure none of the blocks are overlapping and the spacing is to my liking. The second is the EXACT same thing just on my larger monitor. 

Is this just how Squarespace works on the "responsiveness" across screen sizes? 

Is there a way I can adjust/fix with custom css(or anything really) so the spacing and everything else is uniform no matter the computer screen they're looking at it from? 


Screenshot 2023-07-24 at 9.32.46 PM.png

Screenshot 2023-07-24 at 9.32.14 PM.png

Link to comment
  • 2 months later...
  • 5 months later...

I've also been having the same issue across my 7.1 sites, personal and client, and how things change so dramatically by screen size. Case and point – 13" Vs 27". 

I actually can't stand it. It's one of the worst things ever. I'm unsure if there's anything that can be done. 

Screenshot 2024-03-13 at 9.20.09 am.png

Screenshot 2024-03-13 at 9.20.12 am.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.