Jump to content

gallery captions not responsive since adding css

Recommended Posts

Site URL: https://www.thecreativebloc.co.uk/

Hi There!

I have added some css code to change my gallery captions, however they are not responsive and are very strange when viewing on mobile or at different sizes.

Can you help at all? I have used a lot of css in my website but don't really understand it enough to fix this.

This is the code i have in there relating to these captions etc. I may have doubled up on this but have lost track of what bit were important!

Thank you so much,

Capella

 

// Gallery Caption Text //

.gallery-section .gallery-caption p {
  text-align: center;
  font-size: 50px;
  font-weight: 0;
  color: #FDFCF8;
  text-transform: normal;
  line-height: 1.2em;
  font-family: SpaceGrotesk;
}

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(25,25,25,1); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1.5rem !important; /* caption font size */
color: #FDFCF8; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

.sqs-block.image-block {
 padding: 0;
}

.image-caption-wrapper {
 opacity: 0;
 text-align: center !important;
 top: 0 !important;
 position: relative;
 pointer-events: none !important;
}

&:hover,
&:focus {
 opacity: 1;
}

.image-caption {
 left: 50%;
 position: absolute;
 top: 50%;
 width: 100%;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
   }

.image-caption p {
 font-size: 18px !important;
 font-weight: semibold !important;
 color: #EEF281 !important;
 text-transform: uppercase; 
 line-height: 120% !important;
 letter-spacing: 2px !important;
 opacity: 1 !important;
}

.sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle {
 cursor: default;
 pointer-events: all !important;
}

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper {
 background: #191919;
 opacity: 1;
}


/* Image Captions on Hover*/
.image-caption-wrapper {
  min-height: 100%;
  display: flex;
  align-items: center; /*vertically centered */
  justify-content: center; /*text align center*/
  background: rgba(25, 25, 25, 1) !important; /* Background Overlay*/
}

.image-caption-wrapper p {
  color: red !important; /* font color of caption */
}
 

Screenshot 2022-01-03 at 11.21.31.png

Screenshot 2022-01-03 at 11.21.41.png

Link to comment
  • Replies 5
  • Views 528
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Add to Design > Custom CSS to resize text on mobile 

/* Homepage mobile text */
@media screen and (max-width:767px) {
body.homepage figure.gallery-grid-item p {
    font-size: 14px !important;
    line-height: 20px !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

@tuanphan that was incredibly helpful and works beautifully for mobile. I am still having problems that when the website is sized down before it hots the mobile breakpoint the text is still too big for the wrapper. Can you suggest anyhthing to help with this?

 

thank you

Link to comment
On 1/6/2022 at 7:24 PM, Pel said:

@tuanphan that was incredibly helpful and works beautifully for mobile. I am still having problems that when the website is sized down before it hots the mobile breakpoint the text is still too big for the wrapper. Can you suggest anyhthing to help with this?

 

thank you

we can resize text on these breakpoints. Which screen size do you see problem?

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.