Reel Caption for mobile

Hello, I injected some code to get the caption, centred on images in the Reel.

If I want the caption to look good on mobile, I have to set it around 25px, which is way too small on Desktop. so I need a different font size on mobile.

I coded some lines but can't make it work. 

@media only screen and (max-width:767px) {
.gallery-reel{
height:40vh!important
}

.gallery-reel-item{
height: inherit!important
}
  .gallery-reel .gallery-caption-content{
    font-size: 25px !important;
  }
}

Any help will be appreciated.

Thank you

Site: https://www.yodeschamps.com/

On 2/3/2024 at 9:43 AM, _yohandeschamps_ said:

Hello, I injected some code to get the caption, centred on images in the Reel.

If I want the caption to look good on mobile, I have to set it around 25px, which is way too small on Desktop. so I need a different font size on mobile.

I coded some lines but can't make it work. 

@media only screen and (max-width:767px) {
.gallery-reel{
height:40vh!important
}

.gallery-reel-item{
height: inherit!important
}
  .gallery-reel .gallery-caption-content{
    font-size: 25px !important;
  }
}

Any help will be appreciated.

 

Thank you

 

Site: https://www.yodeschamps.com/

Are you telling about this gallery?

Correct. It is not a reel anymore, but I get the same issue. I want the text bigger on the desktop than on the mobile.

🙂

2 hours ago, _yohandeschamps_ said:

Correct. It is not a reel anymore, but I get the same issue. I want the text bigger on the desktop than on the mobile.

🙂

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

@media only screen and (max-width: 767px) {
    section[data-section-id="65ad68f5809d524e0ab92bfc"] .gallery-slideshow .gallery-caption-content {
        font-size: 25px !important;
    }
}

Yeah, I tried this code before. I reinstalled it to try, but unfortunately, it does not appear to work.

18 hours ago, _yohandeschamps_ said:

Yeah, I tried this code before. I reinstalled it to try, but unfortunately, it does not appear to work.

Did you add the code? I can't see that you have added the code

The code is on; I have not removed it yet.

3 hours ago, _yohandeschamps_ said:

The code is on; I have not removed it yet.

Add this code below all the code in Custom CSS Section.

Yeah, I have done it, I got the same result.