Jump to content

Recommended Posts

Would someone be willing to look at the following pages to see how best to go about the alignment issues that occur when viewing these pages in mobile view. The desktop view is good but some funky stuff happens in mobile.

 

Thanks in advance for your help!!!

 

Edited by madseason
Link to comment

You're using Squarespace's Fluid Engine, but looks like you haven't edited the mobile layout. 

Mobile and Desktop layouts are separate on Fluid engine, which explains why many of your icons are all towards the bottom of the Library page on mobile.

Check out this guide:
Mobile layout

If that doesn't solve the problem, jump back on here, and I try and help further.

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

I went through and adjusted the library page in mobile view and it resolved the issue when viewing on a phone.

When I look at the page on an iPad, I still have the same wrapping issue as before, where the text is stacked. Text should not wrap. 

Edited by madseason
Link to comment

The text wrapping on the titles is to do with using a responsive website builder. Once you get to a screen size below the width of your content, the columns all get narrower, and the only thing you can do is to manually set the text to scale down in line with the screen width, but the text would end up unreadable. Old websites tended to get around this by having a very narrow content width (compared to modern design), that could be an option for you on this page, narrower content and only 2 columns before mobile? But that might not be the option you want.

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

I came across these codes for mobile and tablets. Don't know if this is beneficial. What would be the css code to put in for tablets below to prevent screen wrapping and I can experiment with it.

/* Mobile Screens Only */ @media only screen and (max-width: 640px)

{ CODE GOES HERE } /*

Tablet Screens Only */ @media only screen and (min-width: 641px) and (max-width:950px)

{ CODE GOES HERE }

/* Desktop Screens Only */ @media only screen and (min-width: 951px)

{ CODE GOES HERE }

Link to comment

Yes, that would work for setting a font size just for certain screen sizes. I would suggest you would need 768px instead of 640px, and 1200px instead of 950px in your case.

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

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.