7.1 text element spacing buggy and changes between screen sizes

Hi all,

I am having a frustrating problem trying to get uniform spacing between text elements on a page in a 7.1 site. I started from a plain page, no template.

When I align headings and text on pages to suit a large iMac (27inch), it messes up the spacing in other sizes such as a 15 and 14 inch laptop/notebooks. This type of editing doesn't seem to affect the text spacing on mobile screen sizes. 

I've edited the same page 10 times on different sized screens trying to get it right. As soon as it's right on the large screen, the laptop/notebook is no good and vice versa!

Please help!

See attached example of how it looks on the 27 inch screen when I get it right on the 15inch.

Can you share your website URL?

20 minutes ago, Callan said:

I've edited the same page 10 times on different sized screens trying to get it right. As soon as it's right on the large screen, the laptop/notebook is no good and vice versa!

What does "right" look like? I assume that you want the paragraph text to be level at the top, maybe? 

Of course, my bad: https://www.hardcorehumanperformance.com.au/coaching-mentoring-leadership-performance

This is the page driving me nuts.

There's nothing objectively wrong with how it looks, how do you want it to look? What are you struggling to fix?

You do have quite a wide page content width, which often makes it tricky to get looking right on various screen sizes, especially when you make the content on the page much narrower than the grid.

I need the spacing to be uniform between heading and text elements. Using the grid, that would be one spave between heading and text, and two spaces between end of a paragraph and the heading below it.

It will depend what size screen you have looked at it on as to what the spacing looks like. Here is another example of the 27 inch screen version:

If I log into edit this page in the screenshot, the element fields (the blue boxes around elements that show they are live to edit) immediately reshape themselves getting two or three times bigger than the content in them. That is why I believe it's a bug.  

50 minutes ago, Callan said:

getting two or three times bigger than the content in them. That is why I believe it's a bug.  

That's not something that I've expereinced, generally the first thing I would do if it's misbehaving is clear my browser cache and restart, if it continues then talking to squarespace support is good. If you can get a screen recording of this happing that's usually helpful.

I wonder if what's happening is that when you edit on a smaller screen, the text is more squashed and takes up more lines, but since the block row height is being set, when you get to a wider screen, the text takes up fewer lines but maintains the row height, leaving the space. In this case you would want to edit the page in a view that is wider than the max width you've set since the blocks will stretch the rows to accommodate the text getting taller in a way that doesn't happen the other way around.

I will say that text blocks do often get smaller when you change the text within them, which is a "feature" that annoys me every time!

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 – 27" Vs 13". 

I actually can't stand it. It's one of the worst things ever.