Jump to content

Font styling on Gallery images

Recommended Posts

Site URL: https://ellipse-gar-5ewa.squarespace.com

I'm using this code to style gallery iamges and captions, however the font size is very small on display and does not change when I change the pixel size (currently set to 40px). Can anyone help?  (see attached image for screenshot) Thanks!

.gallery-caption {
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align:center;
opacity: 1;
transition: all .3s ease;
color: white;
height: 100%;
p {font-size:40px;}
}
.gallery-masonry-item:hover .gallery-caption {
transition: all 1s ease !important;
display:none;
}
.gallery-caption-wrapper {
display: flex;
place-items: center;
justify-content: center;
}
.gallery-masonry-item {
img {
-webkit-filter: brightness(50%);
filter: brightness(50%);
transition: all .7s ease;
}}
.gallery-masonry-item:hover {
img {
-webkit-filter: brightness(100%);
filter: brightness(100%);
transition: all .7s ease;
}}

RELAND  1.png

Link to comment
  • Replies 1
  • Views 226
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Change this code

.gallery-caption-wrapper {
display: flex;
place-items: center;
justify-content: center;
}

to this

.gallery-caption-wrapper {
display: flex;
place-items: center;
justify-content: center;
}
.gallery-caption-wrapper * {font-size: 12px !important;}

 

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.