Narrative Theme - Change Font Size (Small, Medium, Large Options)

Store Design
1

I’m using Narrative theme for canina.com.

With a larger, spacious font like Montserrat, the headlines are too big and are causing unflattering line breaks (see below).

Narrative only lets you select Small, Medium or Large (vs. specific font sizes), therefore I’d like to be able to specify font sizes for each in the code.

In the example below, the reason I can’t just choose Medium instead of Large for the header, is that the theme will also change the body copy to Medium, which is too small to be legible.

In short, I’m looking for the code to edit that lets me specify which font sizes are applied to the Small, Medium and Large font choices in the Narrative theme.

Thank you!

Screen Shot 2022-07-02 at 5.12.00 PM.png
Screen Shot 2022-07-02 at 5.12.00 PM.png2858×1512 931 KB

2

@Canina

yes, please check theme setting its easy to change font side or you have code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (min-width: 750px) {
h1, .h1 {
    font-size: 36px;
}
}
3

Thank you, @KetanKumar , that worked perfectly for the large option! Is there a way to also define font size for medium and small?

1 Like
4

@Canina

yes, please let me know which section do you need smaller text