gallery captions not responsive since adding css

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 */
}
 

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;
}
}

you're amazing, thank you so much!

@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

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?

@tuanphan Hi thanks so much😬, Sorry to be ignorant but i actually don' know how to workout the sizes when it starts playing up- i would say it's around the size of a laptop screen or half of my large imac desktop 😬 sorry for not knowing better!