Jump to content

Text over slideshow position and text box glitching

Recommended Posts

I want to put the captions of my slideshow images on top of the slideshow as seen in images below - I have used code to do this but the positioning and text boxes are glitching on some and not on others.

It also appears very narrow and squished on mobile - is it possible to reduce the text size and increase the margins on mobile only?

See code I am using below:

//SLIDESHOW CAPTIONS//
section[data-section-id="650af4b4b33e377340836583"] {
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
    top: 50%;
    left: 0;
    text-align: center;
    max-width: 40%;
}
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * {
    font-size: 150% !important;
   overflow: visible;
text-align: center;
background: black;
opacity: 100%;
width: center auto;
margin: center ;
 height: auto;
 padding-top: 5%;
 padding-bottom: 5%;

}
.gallery-fullscreen-slideshow {
    margin-bottom: 0px !important;
}}
    figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
p {
  font-weight:500;
  position: absolute;
  top: -100% ;
  }
}

Would be so grateful for anyones help! 😄

Screenshot 2023-10-02 at 16.52.43.png

Screenshot 2023-10-02 at 16.52.38.png

Screenshot 2023-10-02 at 16.52.27.png

Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.