Captions UNDER each image in Gallery - 7.1?

Hi,

Does anyone know how to add a caption UNDER each image within a gallery?

Follow this guide. 

Thanks. However, I found the code didn't work at all.

1 hour ago, mportch said:

Thanks. However, I found the code didn't work at all.

Did you insert both CSS & JS, or only CSS?

Thanks. Yes I just tried both now. It works. But how do I get the text to sit underneath each image rather than having a ghost panel over the image?

1 hour ago, mportch said:

Thanks. Yes I just tried both now. It works. But how do I get the text to sit underneath each image rather than having a ghost panel over the image?

Can you share link to gallery on your site? It will need some CSS, I guess so..or you can post on that post, and ask brandon ✌️

Thanks. Here you go. I'd like them just under the images aligning to the left edge of the image.

https://smilodon-ocelot-my5f.squarespace.com/lost-america

What is access password?

lost

Hi, any luck with this?

Add to Home > Design > Custom CSS

.gallery-item-description {
    background: transparent !important;
    bottom: -40px !important;
}

Thanks. This works on the gallery pages. I also managed to amend font size and left align it with the margin...

However, it's now not showing up on the mobile version?...

And, how do I align the titles on the homescreen gallery?...

What is access password? lost is incorrect

Password: trythis

I mean the password is actually: trythis

remove above code, and use this

@media screen and (min-width:768px) {
.gallery-item-description {
    background: transparent !important;
    bottom: -40px !important;
}
}
@media screen and (max-width:767px) {
.gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-row-gap: 6vw !important;
}
.gallery-item-description {
    bottom: -20px !Important;
}
}

I get a Syntax error...

edit 

bottom: -20px !Important;

to

bottom: -20px !important;

(i should be lowercase, not uppercase)

Great. I just changed to -30 as was overlapping.

Do you know how to add more space between the caption and the following image?...

3 minutes ago, mportch said:

Great. I just changed to -30 as was overlapping.

Do you know how to add more space between the caption and the following image?...

 

grid-row-gap: 6vw !important;

edit 6vw to 10vw

Perfect!

Hi again,

Now I have all these captions under the images - I want to remove the captions from under the logos in my Awards and Press pages?

https://smilodon-ocelot-my5f.squarespace.com/awards

https://smilodon-ocelot-my5f.squarespace.com/press

password: trythis

Add to Page Settings > Advanced > Header

<style>
.gallery-item-description {
    display: none;
}
</style>

Fantastic thank you!

@tuanphan

Hi, I seem to have a new problem with those gallery descriptions in the mobile version.

The last description on the page is going over the image instead of underneath the image like the others...

https://smilodon-ocelot-my5f.squarespace.com/desert-modern

pass: trythis