Jump to content

Footer/text overlaps when viewed in tablet mode/smaller desktop screen sizes (works OK w big desktop+mobile screen size but overlaps with screen sizes in between)

Recommended Posts

https://reed-collie-yak3.squarespace.com/projects
Password: go

Help! The footer and some other text blocks look perfectly fine when in bigger desktop screens + mobile screen view, but start to overlap and look weird when viewed in screens sized in between those 2 extremes (particularly, on an iPad tablet and a small laptop screen). What code can I use to make sure it keeps a max width of 100% regardless of screen size? Any help appreciated. Thanks.

Image 1 & 2 = Footer viewed on a wide desktop screen + mobile
Image 3 & 4 = Footer viewed on a tablet+small laptop screen
Image 5 & 6 = Text block viewed on a wide desktop screen + mobile
Image 7 & 8 = Text block viewed on a tablet+small laptop screen

Footer OK1.png

Footer OK2.png

Footer Error1.png

Footer Error2.png

Content OK1.png

Content OK2.png

Content Error1.png

Content Error2.png

Edited by nahstudio
Added screenshots
Link to comment

The problem is quite simple, you have overlapping blocks on the desktop version, so when the text exceeds the width of the block it breaks to a new line, and instead of pushing the content below it down it overlaps.

I would suggest placing more text into the each text block where possible, and making sure that you limit the overlapping of blocks and this won't happen.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

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

 Did I help? Buy me a coffee?

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.