Jump to content

How to fix text overlay on grid masonry - mobile view

Recommended Posts

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? ScreenShot2023-04-06at1_11_43PM.thumb.png.c67a457ed4991775b1cb932a0ccb9c67.png

tagging @tuanphan for any possible support, thank you!

 

Edited by ctaite92
direct message
Link to comment

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?

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
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

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!

🔌 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
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
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? ScreenShot2023-04-06at1_11_43PM.thumb.png.c67a457ed4991775b1cb932a0ccb9c67.png

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

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.