Fix heading size on Icon bar (shrine theme)

[robertbarta]

Hello, I am using a Shrine theme and wanted to see if someone could fix the heading size on the “Icon Bar” section. I want the headings to all be the same size, is anyone able to do this?

Here is the link to my store so you can view it: https://evagleam.com/products/blackhead-water-vacuum

Headings are different sizes on my store:

Headings are the same size on other stores:

[BSSCommerce-HDL]

Hi @robertbarta ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css or theme.css

Step 3: Insert the below code at the bottom of the file → Save

.multicolumn .title-wrapper-with-link h2 {
    margin-top: 0;
    font-size: 25px !important;
}

Here is result:

Hope this can help you

If our suggestions are useful, please let us know by giving it a like or marking it asa solution. Thank you

[ZestardTech]

Hello There,

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

.multicolumn-card__info h3 {
font-size: 40px;
}

[Arif_Shopidevs]

Hi @robertbarta

use this css in base.css

1. navigate your theme from Online Store
2. Click Edit your theme edit code
3. Search base.css

.icon-bar-card.multicolumn-card .multicolumn-card__info h3 {
    font-size: calc(var(--font-heading-scale) * 4rem) !important;
}

[sahilsharma9515]

Hi @robertbarta Please add the code in your theme.css/base.css/style.css file which is available in your theme.

h2.title.h1 {
    font-size: 23px !important;
}

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
6. You can add the above code at the bottom of the file.

Result:

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

[robertbarta]

I get an error message and it doesn’t allow me to save:? Also, are you able to make all the heading sizes match the bigger heading rather than the smaller ones?

[Arif_Shopidevs]

Please insert in base.css not index.json file

[sahilsharma9515]

Hi @robertbarta You are adding it in the wrong file, you need to search theme.css or base.css or index.css or style.css, files you are adding it in index.json file which is not correct.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

[robertbarta]

okay, my apologies it works now, except are you able to make all of the headings bigger?

[sahilsharma9515]

Hi @robertbarta Glad to listen that it worked, Please don’t forget hit Like and Mark it as solution!

Can you please specify which all heading are you referring?

Best Regards

Sahil

[robertbarta]

Basically, I am trying to make all the headings larger than the descriptions like this:

let me know if you need further clarification

[sahilsharma9515]

Hi @robertbarta Yes it is possible, Add this code where you have added the previous code.

p.image-with-text__heading.image-with-text__heading-heading_pBJrbX {
    font-size: 50px !important; // change 50px to whatever size you think will be good for you.
}

.multicolumn-card__info>h3 {
    font-size: 32px !important; // change 32px to whatever size you think will be good for you.
}

h2.title.h1 {
    font-size: 23px !important; // change 23px to whatever size you think will be good for you.
}

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

[Arif_Shopidevs]

@robertbarta
Our solution only effected the selected icon with text that you set. It will not effect other part of the area. You can try this.
thank you