Jump to content

Block position changing within the grid on smaller viewports

Go to solution Solved by Dingo_Phillips,

Recommended Posts

Site URL: crane-grouper-4fky.squarespace.com

I am having a critical issue with the design of my site.

Blocks are not staying consistently positioned when changing between different viewport sizes.

See the two screenshots below.

The first shows the design on a 1080p monitor. Notice there is one row of grid between the title of section and the paragraph.

The second shows the same design on a 1440p monitor. Now there is almost 3 rows of grid between these sections.

Why is this happening? It's making it impossible to design the site because the design only works on the monitor size it's designed on. As soon as you change monitor, the blocks either overlap or are massively spaced out because they're scaling with the grid in a strange way. The responsiveness does not appear to be working correctly.

How can I fix this?

Thanks.

1080.png

1440.png

Edited by Dingo_Phillips
Link to comment
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Solution

I have figured out what is going.

It was because the size of title text block was bigger that size of the content in the paragraph block. To the extent that the box for the title overlapped into the paragraph.

This created the spacing issues experienced. Once the blocks were resized so that there borders were properly aligned, things fell into place as expected.

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.