Jump to content

Overlay Text for Gallery Images (SQSP 7.1)

Recommended Posts

Site URL: https://rootsandberries.squarespace.com

Hi there

I'm currently building a client website – https://rootsandberries.squarespace.com : password: berries – and I'm trying to create a slideshow gallery with overlaid copy. Something that was simple pre-SQSP7.

On the homepage, I need to get the slideshow looking like the static image that's currently sitting below it.

The text position, the font, being able to change the image opacity etc. All the features of the static image, but on the gallery...

Is there anyone out there with a solution that works for all screen sizes?? Calling @tuanphan

I've tried a few different Custom CSS solutions, but none work as I need, or for mobile view.

Thanks
Mat

Link to comment
  • Replies 7
  • Created
  • Last Reply
13 hours ago, matblack said:

Hi tuanphan

Yes that's right, text to appear over a slideshow, and not underneath it as captions.

Ideally looking like the text over the static image I have below the slideshow on the site.

 

13 hours ago, matblack said:

Hi tuanphan

Yes that's right, text to appear over a slideshow, and not underneath it as captions.

Ideally looking like the text over the static image I have below the slideshow on the site.

Add to Design > Custom CSS

/* text over slideshow */
body.homepage figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
}

 

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

Amazing! That's worked for desktop, but the text is cut off for mobile.

I moved the position of the text using the top and left entries to get the text to sit top-left on the image.

Also, I need to get the text into the custom font I have on the site 'F37 BOBBY BOLD' at the h1 size (2.3rem)

Link to comment

I'm looking to get the text appearing over the gallery slideshow to be the same as the text overlaying the static image I have currently below the gallery slideshow (We are an award winning family of cafés in London’s beautiful green spaces.)

If that makes sense.

Same position (top-left), same font, same font size...

Link to comment
20 hours ago, matblack said:

Amazing! That's worked for desktop, but the text is cut off for mobile.

I moved the position of the text using the top and left entries to get the text to sit top-left on the image.

Also, I need to get the text into the custom font I have on the site 'F37 BOBBY BOLD' at the h1 size (2.3rem)

Add to Design > Custom CSS

/* gallery caption font */
p.gallery-caption-content {
    font-family: 'F37 BOBBY BOLD' !important;
}
/* Resize home gallery mobile */
@media screen and (max-width:767px) {
body.homepage .gallery-fullscreen-slideshow {
    height: 35vh !important;
    margin-bottom: 5px !important;
}
}

To change gallery caption to h1 style, you can edit Gallery Images > Edit caption follow this format

Quote

<h1>enter caption here</h1>

 

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.