Narrative Theme - How can i change caption font size for "Gallery" Section?

Store Design
1

Hi,

I am looking for a way to increase the font size of the caption for the gallery section. As shown in the image. How would i do this?

Thank you.

KommeK5_0-1626760074129.png
KommeK5_0-1626760074129.png1911Ă—475 1.27 MB

2

Try adding this to your theme.css

h3.h2.text-title.image-bar__caption {
    font-size: 4rem;
}

you can change they 4rem to a size that you want.

3

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

4

hello @KommeK5

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

5

Hi thanks for the reply,

Would it be added in theme.liquid? @Bunty

theme.png
theme.png1485Ă—647 51.2 KB

@Kinjaldavra @ZestardTech https://kommek5.myshopify.com/ and test. thanks

6

Hello There,

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:

h3.h2.text-title.image-bar__caption {
font-size: 2rem!important;
}
7

@ZestardTech I do not seem to have a theme.scss.css asset

KommeK5_0-1626763969368.png
KommeK5_0-1626763969368.png264Ă—385 2.95 KB

8

Hello @KommeK5

Please search this one file theme.scss , theme.css

9

@ZestardTech I was able to add it to under gallery.liquid and it seems to work, not sure if that is ok though.

Thank you!

KommeK5_0-1626765145360.png
KommeK5_0-1626765145360.png1910Ă—523 296 KB

KommeK5_1-1626765161215.png
KommeK5_1-1626765161215.png1393Ă—463 16.4 KB

10

@KommeK5 I gave the solution without any drama and please note that using “!important” is bad practice. Good luck.

11

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.

12

Hi @Bunty , unfortunately after trying your solution it seems the word size cant be changed? When i removed the important, this happens for all font sizes

KommeK5_0-1626766283582.png
KommeK5_0-1626766283582.png1860Ă—457 1.16 MB

Would love to continue trying your suggestions

Thanks

13

Hi @ZestardTech , so right now im facing a related issue. Because i have an english and chinese (ch-tw) site, the word sizes at 3rem is abit too big for english but ok for chinese. Is there a way to have a " if language = chinese" then size rem3 and " if language=english", size = rem2?

Thank you

14

Hello @KommeK5

Remove old css and add this one please.

h3.h2.text-title.image-bar__caption.notranslate {
    font-size: 25px!important;
}
h3.h2.text-title.image-bar__caption {
    font-size: 25px!important;
}
15

@ZestardTech Thanks alot for the help! It works although its weird when i change h3.h2.text-title.image-bar__caption.notranslate it actually changes the chinese version instead of english

16

Hi @Bunty , wanted to follow up. It was my misunderstanding that my theme.scss.liquid was unusable since it was deprecated. And i did not know it was the same as theme.css.

After placing your code there it has worked and i no longer need the important tag.

Thank you!

17

Good man, stay away from those fools who suggest you to use “!important”, they are not important.