Jump to content

Accordion & Image not working mobile + eliminating text wrap on site

Recommended Posts

Hello. I am having trouble optimizing an accordion and image pairing for mobile. Screenshots attached. The image seems to be enlarging when the accordion information is expanded. Does anyone have CSS code to fix this? Also, I can't seem to eliminate text wrapping across different device sizing. Can anyone help? (additional screenshot attached showing title text wrap in tablet size)

It is happening on other pages of this site as well and i can't figure it out. Thanks in advance!

Site: https://hibiscus-dachshund-wk7b.squarespace.com/config/

Page: Our People

pw: forumhelp1

Screenshot 2022-12-06 at 1.52.56 PM.png

Screenshot 2022-12-06 at 1.53.09 PM.png

Screenshot 2022-12-06 at 1.57.21 PM.png

Link to comment
  • Replies 1
  • Views 455
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Easy fix for Leadership, it's best practice to make text boxes as wide as possible for headings without compromising the design so that the box doesn't create a forced break in the text when you get to tablet sized screens. (the 24 column grid gets narrower until it switches to the 8 column grid on mobile, and this causes blocks to become narrower, so when you have a block that is only just big enough on desktop you will see this problem).

The accordion issue is more tricky, but again is related to the nature of the grid system. When you have an accordion next to another block (like an image), the rows expand with the accordion opening which also stretches the blocks on the same rows. As you have an image within a shape, you have the image set to Fill so that's what it does, it fills the now much taller area that the image block occupies.

See how the grid stretches but the image still takes up 7 rows:

image.thumb.png.1feaec10a7445da2bae35b83b21bc33c.pngimage.thumb.png.1700bfb1906f7c75baf8c4a73a1ff955.png

As for a solution, there isn't a perfect one when you have that much text it needs to go somewhere. Making the accordion block take up more rows (but vertically center aligned) will minimize the stretching, but not by much. Laying out each one with the image left and name/contact right, and the accordion learn more full width underneath would be the best change I can suggest.

I would also recommend that for the desktop view, you have the accordion block set to vertical align top rather than center, that way the Learn About... always stays at the top when one is expanded.

Fluid Engine is good but needs to be used carefully, I myself am still learning, and working through my "best practices", it's a process, but I'm hoping that it's worth it in the end!

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) 
 🖼️ Pinch-to-Zoom Gallery Lightbox 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.