Website Responsiveness across all devices

I use 7.1 and generally like Squarespace. SS gives you the ability to customize for desktop and mobile, but when you look at your website on different devices stuff looks wonky. Has anyone figured a way around this. I've searched online and Youtube and people have different ways of dealing with this but nothing it seems from SS. How do people fix this?

Mainly when your building the site you should view the site on as many devices as you can.  Remember some phones are small and some are large and built on different operating systems plus people use tablets of all sizes.  It's a bit of testing and remember if you change things on mobile it could change it on desktop.

Here's an article of tools to test your site on different browers: https://www.browserstack.com/guide/test-website-in-different-screen-sizes

Hope this helps!

Tiffany,

Thank you for the reply, but this must be an issue with SS. Here is one of the websites you've done, and there is a point with a smaller screen (Tablet size) where the text does this. Screenshot below.

Have you got anything specific you're looking to fix? Examples on a website?

In general terms, there are approaches you can take when building and optimizing a page to make it responsive to a narrower screen. Not making blocks narrow when they could be wide, reducing usage of very narrow blocks that simply won't work on a smaller screen.

Checking how a page looks on a smaller screen and adjusting the layout in that view can also be useful, there's a balance to be met, but text blocks size generally want to be set on a wide screen as the text will wrap and become taller on smaller screens.

Limiting the maximum content width in the Style Spacing settings to a smaller width will make it easier to get it looking good on tablet, but that is not always possible.

thanks for the reply. Do you think Squarespace is looking at updating their program to help with this issue? It can sometimes be real bad and I'm sure they've heard about this from other developers. You can see in these attached images, I try to compensate by adding more space in between the title and paragraph, (so that looks weird), and then when you make the screen smaller it overlaps the other text. Before I made this adjustment, the title would completely be over the paragraph when going to a smaller (tablet sized) screen. If you adjust it based on that smaller screen size, going back to the normal desktop size it's all off too. Unless there's code for this it's a huge flaw in the Squarespace platform imo. It's just not responsive enough.

On 3/25/2024 at 6:37 PM, TiffanyDoner said:

Mainly when your building the site you should view the site on as many devices as you can.  Remember some phones are small and some are large and built on different operating systems plus people use tablets of all sizes.  It's a bit of testing and remember if you change things on mobile it could change it on desktop.

Here's an article of tools to test your site on different browers: https://www.browserstack.com/guide/test-website-in-different-screen-sizes

Hope this helps!

Hi, It's not really helpful as it doesn't solve the issue unfortunately.

On 4/5/2024 at 6:33 PM, johnny1981 said:

thanks for the reply. Do you think Squarespace is looking at updating their program to help with this issue? It can sometimes be real bad and I'm sure they've heard about this from other developers. You can see in these attached images, I try to compensate by adding more space in between the title and paragraph, (so that looks weird), and then when you make the screen smaller it overlaps the other text. Before I made this adjustment, the title would completely be over the paragraph when going to a smaller (tablet sized) screen. If you adjust it based on that smaller screen size, going back to the normal desktop size it's all off too. Unless there's code for this it's a huge flaw in the Squarespace platform imo. It's just not responsive enough.

I totaly agree, i am having the same issue right now. After having spent weeks building a really lovely website I now cannot make it live as it is horrendous on mobile view, I have paid the subscripton also so I would like my money back if his cannot be resolved easily... I do not have the time or nowhow to do this, it is supposede to be easy to make a website without being a professional web designer... This is totaly untrue fro where I am sitting right now. Very, very disapponted with this. All my time and energy down the bloody drain I cannot make my website live lookig like this!!!

You can edit it for "Mobile View", just not other in between views for different size tablets and screens.

17 hours ago, Natty1 said:

All my time and energy down the bloody drain I cannot make my website live lookig like this!!!

Looking like what? Do you want to share an example and you r website?

The mobile view is a total jumble. Even when the guys there tried last night or this morning they couldn't make it look good either so i cannot see how I have any chance of doing so. A friend just suggested that i change to the classic versio as you don't have this issue with the classic version so that is what i am tryin to do now.

6 minutes ago, Natty1 said:

Even when the guys there tried

What guys?

The squarespace guys, I had to message them on facebook as there isn't a customer support phone line. I really want toknow how to change my site to classic, how do i do this? My emails aren't being resonded to and live chat didn't work, so i came here and found your reply... I have found a forum page where everyone is asking about why fluid is so bad and needing to turn fluid off... Is this possible? How do I do it? And will it turn into the classic version that I require? Thank you for helping me by the way! I really appreciate it

26 minutes ago, Natty1 said:

I have found a forum page where everyone is asking about why fluid is so bad and needing to turn fluid off... Is this possible? How do I do it? And will it turn into the classic version that I require?

If you prefer to use the classic "LayoutEngine" editor where there isn't a separate mobile layout, you can add new "Classic" page sections instead of "Fluid Engine" sections. When adding a new page section, scroll down past all the new section options to choose the classic ones by clicking Looking for sections built with our Classic Editor?

Note that you cannot convert Fluid Engine sections back to Classic sections.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi, thank you for your response this is driving me insane now. I found an answer on another thread that said you can go to settings to change back to classic, however the same options don't seem to be there now. My friend did hers in Classic and her website is perfect on both desktop and classic, she advised that I change it to classic. 
However what do I do about all the work I have done so far?? She said similar to you to change each block, although I have tried that and cannot for the life of me see how...
I am rather desperate now, i have started making a Wix site although I don't really like it... How can this forum be the ponly way to sort thngs out? It is so random?
Like I will sit here with all the time in the world waiting for some kind poerson to help me! This is just mad, I don't get it!

Should I just start a fresh? 

1 hour ago, Natty1 said:

However what do I do about all the work I have done so far?? She said similar to you to change each block, although I have tried that and cannot for the life of me see how...

If you've built page sections using the Fluid Engine (FE) editor and you'd prefer to use the Classic editor, you must build them from scratch. You can "upgrade" Classic sections to FE but not the other way around.

Hi Guys,

I'm having similar issues which is driving me a bit crazy, as its not affecting all pages which I've used the same template for, think the template ID is  id="yui_3_17_2_1_1713444760377_472", I take some of the sections out.

So I'm creating features (articles) using separate pages and the above template, the site is an online magazine. They need their own page and URL for sharing etc. Ive basically I've been adding buttons under text blocks for 'feature articles', the buttons are links to the main feature page, but on some particular pages there is a huge gap between the button and text on certain devices, the gaps vary in size for each feature page I've written, most feature pages  seem ok, but a few are impacted, Ive tried ensuring the same page design config for the ones that are ok is the same for the impacted pages (same padding etc).  I have been on ChatGPT, watching some vids but cant seem to find the route cause or solution (ill keep searching). Is this a general coding issue with SS?

I now have to review every single page for the features I've created now and going forward to see how big the issue is on mobile simulator but even that is not 100% (Clicking on every device in the simulator to see if there's a huge gap).

The site is still behind a password wall and not published as I'm still building, designing and adding content, could that be part of the problem?

Does anyone have the answer!

Ive tried to review my Pixel Pro 8 by turning on Dev Options and tools but there's an issue with Chrome dev tools pulling up remote devices so I cant see where the code is on my phone. When I do inspect the page on simulator and laptop I see a ton of divs under the block code. 

I don't want to Go Live without solving this as my site is all about visuals etc, the feature pages are the main content driver for the site, it looks horrendous and if can't be fixed then its either delete the impacted pages or move platforms, if i delete the pages then again how can i continue using SS if new pages I create have the same issue, it becomes a confidence and manual labour issue? I could just add text to say 'Read More Features and link it but the buttons are more visual, or I move the buttons around the page but I want them where I want them. I'm hoping its me just missing something or some simple CSS code I can add but I have been trying this.

Appreciate thoughts, example screenshots of issues attached. I've used the same feature page as an example.

The last two images are screenshots from my Pixel 8 pro and the last pixel 5 (oldphone).

Regards

Lee

Will.myers.com has code that fixes it, thanks Will (its free btw)

https://www.will-myers.com/articles/fixing-the-tablet-spacing-problem-in-squarespace-fluid-engine

On 4/19/2024 at 11:18 AM, LeeT said:

Will.myers.com has code that fixes it, thanks Will (its free btw)

https://www.will-myers.com/articles/fixing-the-tablet-spacing-problem-in-squarespace-fluid-engine

 

will this work for laptops too or just tablet responsive issues?