Text overlapping on phone mode

I've got text over an image which is working in desktop view but doesn't work in phone view. Is there a way to make this work? And secondly, can I change the image cropping for the phone view?

Thanks
Tom 

If you told us what version of Squarespace you are on and provided a link to your site, we might be able to help better.

Hi

Website link: 

https://furnishlondon.squarespace.com/

Password: Furnish

Using the Quincy template. 

As well as the overlapping text, is it possible to change the crop of the cover image in the mobile site? 

Thanks
Tom 

Unfortunately, I'm not familiar with the Quincy template. Perhaps someone else here is.

One thing to check, however: When you are in edit mode on mobile view, are the text blocks overlapping, as below?

If so, adjust the size so that they are stacked and non-overlapping.

I'm not sure what the Quincy template is doing to the image, but there are options there, including using different images, hiding one on desktop view and hiding the other on mobile view. See here for more info.

(Also, just FYI, "Furnishing" has a typo. There's an extra i.)

On 4/27/2023 at 11:37 AM, qosmic said:

Unfortunately, I'm not familiar with the Quincy template. Perhaps someone else here is.

One thing to check, however: When you are in edit mode on mobile view, are the text blocks overlapping, as below?

If so, adjust the size so that they are stacked and non-overlapping.

I'm not sure what the Quincy template is doing to the image, but there are options there, including using different images, hiding one on desktop view and hiding the other on mobile view. See here for more info.

(Also, just FYI, "Furnishing" has a typo. There's an extra i.)

I've got the same problem as OP. And while in Edit mode, my text boxes overlap as in the image you shared Qosmic. How do I change the size to get them to stack? Whenever I try to resize the box with larger text, it won't get smaller.

The only way for me to stack the boxes is to move the lower box down which then creates extra space on the Desktop view and wider Mobile screens.

That's not a sizing issue; that's a spacing issue. Squarespace won't let you size the block small than the text. It's hard to be helpful without seeing your site. Is there some reason why you can't combine the text into one text box?

On 5/3/2023 at 5:34 PM, qosmic said:

That's not a sizing issue; that's a spacing issue. Squarespace won't let you size the block small than the text. It's hard to be helpful without seeing your site. Is there some reason why you can't combine the text into one text box?

Thanks, Qosmic. My site is www.anthonycoccerino.com and the PW is "researchrules."

Is the issue a Line Height issue? Or is there a different issue when you say "spacing"? It seems like the text size is a tiny bit bigger than what the box thinks should be one single line but that's me guessing as a newbie to this stuff.

As for combining - I'm not really sure I have a good answer for that. Lol. Is it really that simple? Is that what I should be doing? For some reason, I guess I just assumed they should be in their own boxes...

(FYI: If you look at the site, I did change one of the sections - "Getting Skeptics to Try Crypto" - as one box (heading text plus paragraph text) just to see how it reacts on different screen sizes.

4 minutes ago, ARCUX said:

Thanks, Qosmic. My site is www.anthonycoccerino.com and the PW is "researchrules."

Is the issue a Line Height issue? Or is there a different issue when you say "spacing"? It seems like the text size is a tiny bit bigger than what the box thinks should be one single line but that's me guessing as a newbie to this stuff.

As for combining - I'm not really sure I have a good answer for that. Lol. Is it really that simple? Is that what I should be doing? For some reason, I guess I just assumed they should be in their own boxes...

(FYI: If you look at the site, I did change one of the sections - "Getting Skeptics to Try Crypto" - as one box (heading text plus paragraph text) just to see how it reacts on different screen sizes.

Now I remember why I didn't put them both in the same text block - I need Header 3 and Paragraph 2 text - but when I do them both in one text box, it creates a big space between the header text and paragraph text. Both ways leave me with the same problem - So, I guess what I need to learn how to do is:

1) eliminate unwanted space between Headers and Paragraphs;

2) how to avoid text wrapping causing text overlap.

Sorry if I'm making this all more complicated than it should be - there's a reason why I'm trying to be a UX Researcher and not a designer or dev. Lol.

Unfortunately, there's not a short answer here. You can decrease the line height, but you have to know a little CSS, and I'm not sure that's really the issue. (Line heights are typically there for a reason.)

My sense of it is that you are treating a webpage like a PDF or any kind of print where the fonts and spacing are beautiful and fixed. The fundamental truth and challenge of modern web design is that there are screens of nearly any size and nearly any aspect ratio, which is why your page needs to render dynamically and why you don't have control over how it will look. You need a kind of "meta" design that can adapt to any format.

Below a certain screen width, for example, text has to wrap or else become so tiny as to be illegible. Which is the better user experience?

With a website builder like Squarespace, there are tradeoffs. On the one hand, you can stand up a site very easily without knowing a single bit of code. On the other, Squarespace has to break the open canvas of a custom-coded page into a grid of blocks, and you have to work within that limitation.

If you have text in two blocks, Squarespace will treat those as two separate entities and scale them appropriately. If the blocks are overlapping, then the content can overlap depending on the screen size.

You can tweak all the text on every page with custom CSS, but that will really slow down your site--not so the users notice (perhaps), but Google will, and we live in a world where SEO matters in most cases, certainly for a commercial site. Google is smart enough to understand that a messy website was probably not written by professionals, and all other things being equal, it will tend to rank the messy site lower than the well-designed one.

Remember, you have two distinct but nested audiences for your site: the machine and the humans. You first have to convince the machine to show it to humans before you can convince the humans to do anything.

If you need to do a couple CSS tweaks here and there, fine. Most people do, including me. But you'll be much better off designing your site within the limitations of your chosen tool.

On 5/8/2023 at 4:23 PM, qosmic said:

Unfortunately, there's not a short answer here. You can decrease the line height, but you have to know a little CSS, and I'm not sure that's really the issue. (Line heights are typically there for a reason.)

My sense of it is that you are treating a webpage like a PDF or any kind of print where the fonts and spacing are beautiful and fixed. The fundamental truth and challenge of modern web design is that there are screens of nearly any size and nearly any aspect ratio, which is why your page needs to render dynamically and why you don't have control over how it will look. You need a kind of "meta" design that can adapt to any format.

Below a certain screen width, for example, text has to wrap or else become so tiny as to be illegible. Which is the better user experience?

With a website builder like Squarespace, there are tradeoffs. On the one hand, you can stand up a site very easily without knowing a single bit of code. On the other, Squarespace has to break the open canvas of a custom-coded page into a grid of blocks, and you have to work within that limitation.

If you have text in two blocks, Squarespace will treat those as two separate entities and scale them appropriately. If the blocks are overlapping, then the content can overlap depending on the screen size.

You can tweak all the text on every page with custom CSS, but that will really slow down your site--not so the users notice (perhaps), but Google will, and we live in a world where SEO matters in most cases, certainly for a commercial site. Google is smart enough to understand that a messy website was probably not written by professionals, and all other things being equal, it will tend to rank the messy site lower than the well-designed one.

Remember, you have two distinct but nested audiences for your site: the machine and the humans. You first have to convince the machine to show it to humans before you can convince the humans to do anything.

If you need to do a couple CSS tweaks here and there, fine. Most people do, including me. But you'll be much better off designing your site within the limitations of your chosen tool.

Thanks, Qosmic. I took your suggestion and added the headings in the same block as the body text. The slightly awkward spacing is a much better UX than overlapping text.

I appreciate all of your time and thoughtful responses!

The first part of this blog post might be helpful if you are new to dynamic rendering and screen testing.

https://qosmic.tech/rocketsurgery/how-to-display