ctaite92 Posted April 6, 2023 Share Posted April 6, 2023 (edited) Hi, I'm trying to fix the text overlay on my page when set to mobile view. The words are jumbled and centered in the middle rather than placed over each appropriate image. How do I fix this? tagging @tuanphan for any possible support, thank you! Edited April 7, 2023 by ctaite92 direct message Link to comment
Ziggy Posted April 7, 2023 Share Posted April 7, 2023 I don't really know how you have this page set up, can you share your website URL? I might guess that you have the line height property set to zero (0em) rather than the "normal" 1.2em to 1.6em. Can you check this in the Styles -> Fonts -> Headings menu? ctaite92 1 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (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
ctaite92 Posted April 13, 2023 Author Share Posted April 13, 2023 On 4/7/2023 at 4:12 AM, Ziggy said: I don't really know how you have this page set up, can you share your website URL? I might guess that you have the line height property set to zero (0em) rather than the "normal" 1.2em to 1.6em. Can you check this in the Styles -> Fonts -> Headings menu? Hi, sure. The url is www.chanteldominique.com/travel PW: itscoming222 I checked the line height property and it was at 1em, so I moved it to 1.2em. They're still jumbled though. Link to comment
Ziggy Posted April 13, 2023 Share Posted April 13, 2023 How have you added these captions? 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (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
ctaite92 Posted April 13, 2023 Author Share Posted April 13, 2023 1 minute ago, Ziggy said: How have you added these captions? So I followed another Squarespace forum that talked about adding overlay to an image and added the following code: figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: rgba(0,0,0,0.75); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after { opacity: 0.75; } /* tablet issues */ @media screen and (max-width:767px) { /* footer email line spacing */ div#block-706d28dbd3f6b1dcce07 p { line-height: 20px; } /* home huge spacing */ div#block-yui_3_17_2_1_1618358544464_4769 { display: none; } footer.sections section { min-height: unset !important; } } /* remove gap */ figcaption { padding: 7 !important; } .gallery-caption * { color: white !important; font-size: 70px !important; } Link to comment
ctaite92 Posted April 13, 2023 Author Share Posted April 13, 2023 truthfully, i think i'm going to scrap the whole layout and redo it anyway. but if you have any suggestions, it would be helpful for how i organize it moving forward. thank you Link to comment
tuanphan Posted April 16, 2023 Share Posted April 16, 2023 On 4/7/2023 at 1:17 AM, ctaite92 said: Hi, I'm trying to fix the text overlay on my page when set to mobile view. The words are jumbled and centered in the middle rather than placed over each appropriate image. How do I fix this? tagging @tuanphan for any possible support, thank you! Can you share link to Europe page? I don't see any gallery images on /travel page https://www.chanteldominique.com/travel Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment