Jump to content

Responsive Text block formatting issues on different PCs

Recommended Posts

Hey guys! My first time in the forum and I'm hoping this can become a resource for sure. So....I've attached 2 screenshots of the homepage of my site. My SEO/marketing and UI guy lives oversees. We've been holding calls to design and edit the site together. We've run into this issue a few times and I can't for the life of me figure out how to remedy the issue. The photo of the laptop is how the page formats on my screen. I'm the design guy so I've been pretty deliberate about spacing, copy length, etc. to create a smooth and aesthetic layout. Problem is...the other photo is how he's seeing it from his end. This example actually looks less awkward than a couple we've run into...but I'd really like to know what I can do to make the layout uniform across different PCs. Mobile doesn't seem to be an issue but his PC screen is wider I'm guessing so the responsive text is changing the format? (Question mark because I'm totally guessing here). Anyhow, any help or direction would be appreciated. Was wondering if there was site-wide css code I may be able to inject to remedy it? IDK. Just trying to figure it out. Thanks

62864582-5A84-46B0-B003-DE6E7841D089.JPG

unknown.PNG

Link to comment

Can you share your website URL and page? Is this a new website? I get the impression that you're using Squarespace 7, was there a reason that you're using an old template? 

The way that the width of the page affects different parts of your website are perfectly demonstrated here. As you get wider screens the images get bigger (because they are a fixed width to height ratio, increase the width you increase the height), and the text gets shorter (font size is the same, text-area gets wider, and the text takes up fewer lines).

The latest version of Squarespace (7.1 and Fluid Engine) can help with this as you can better control images (set to fit so they don't grow in height) and you can set text blocks to vertically center align within a block. Fluid Engine is new and does have some problems and different issues to work around, so not necessarily recommended, but it's getting better and more recommendable. 

You can have more control over the UI if you have a narrow content width set in pixels rather than in percent as this will keep the page looking the same across more devices, but does limit your design.

Another alternative would be to have your font scaling based on the width, but this (like the other "solutions") comes with it's own problems!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
  • 4 weeks later...

Hey! Thanks man. First time on the forum and I didn't realize I had gotten a response so quickly. I'm going to look into this for sure. I'm in the home stretch of locking down a few final things with site functionality and this has taken a back seat for a bit...just do to priority. Thanks so much for the response! My url is ironoakfitness.com

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.