How can I increase the font size of the header text in Simple Theme

WathArt
Excursionist
17 0 5

How do I edit the code so that I'm able to enlarge the font and change the font of the header text in the Simple Theme?

 

 

0 Likes
CANDISOFT
Shopify Partner
1103 146 480

PLease provide website url and if your store is password protected then also provide password

If helpful, Please Like and accept The Solution.
0 Likes
WathArt
Excursionist
17 0 5
CANDISOFT
Shopify Partner
1103 146 480

Explain with screenshots

If helpful, Please Like and accept The Solution.
0 Likes
WathArt
Excursionist
17 0 5

Screen Shot 2020-12-13 at 5.30.48 PM.png

I want to make the font size of "tee shirts & revolutions" be much larger and if possible, able to fill in some/most of the white space between "WATH!" and "tee shirts & revolutions".

 

 

 

0 Likes

@WathArt 
Do this to fix it in 20 seconds:

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

div#HeaderLogoWrapper {
    max-width: 300px !important;
}
@media (max-width: 767px){
    div#HeaderLogoWrapper {
    max-width: 400px !important;
}
}


You can change the values to anything you wish:

300px = desktop
400px = mobile

Please let me know whether it works.

Kind regards,
Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
WathArt
Excursionist
17 0 5

Thank you for your reply and suggestion. 

Added recommended code per your recommendation but I don't observe any change in the size of the tagline. See attached screenshots:

added CSS.pngtagline.png

0 Likes

As aforementioned the values can be changed as per your wish.

Instead of 300px you can use 400px and so on and so forth.

Additionally, you should not validate your design using the customize page - it is not accurate. Always review your website with the preview mode. 

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
WathArt
Excursionist
17 0 5

Thanks again for your assistance. Much appreciated.

I changed both font sizes to 600px to see what would happen (and thanks for letting me know about preview mode) .

The header "wath!" grew significantly larger.

However, the font size for the tagline "tee shirts, revolutions & thangs" doesn't change.

That is my main concern. How can I increase the font size and width of the tagline so that the text is larger

and there is less white space between it and the header banner "wath!".

0 Likes
CANDISOFT
Shopify Partner
1103 146 480

Please place this code at the end of theme.scss

.announcement-bar__message {
    font-size: 20px;
}
If helpful, Please Like and accept The Solution.
0 Likes