ctaite92

@Ziggy I'm going to try that and see what happens. Will loop back...and yes definitely going to reach out to support next, if issues still occur. Thanks Ziggy, I appreciate it.

@Ziggy yes! its www.chanteldominique.com 

pw: itscoming222

It's happening on two posts. 

Travel -> USA -> 10 Best Nature Spots on the Gulf Coast

Blog -> How I Planned a 10 Day Solo Roadtrip

Hi @Ziggy I'm also having an issue of the desktop version not being able to sync properly with the mobile view. For me though, it's the text. I have a blog and when it's on desktop view, the text is widescreen and readable. But when it turns to mobile view, the words become centered and fall down the center of the page, making it extremely difficult to read. It's doing this on some of my blog posts, not all though. 

Note: it starts out fine, but gradually thins out. 

Following this for replies. Thanks

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

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

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. 

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!