How can I adjust the button size on my homepage image with text?

Store Design
1

Hi I’d like to make the button larger on my header block on my home page. I’ve tried searching the group and added the below which I seen worked for another but this hasnt changed anything my url is: www.scentedrainbows.com

.hero__btn {
font-size: 50px;
}
.hero__inner .hero__btn{width: 150px;}

I appreciate any help thanks

2

Hi @ScentedRainbows

I presumed you added this to the bottom of the theme.css file?

This CSS will make the button significantly larger:

.btn.hero__btn {
    font-size: 2em;
}

If you want to make it even bigger you can change 2em for 2.1em, 2.2em etc. until you find the value you’re happy with.

3

thanks I’ve added that to the bottom of theme css and nothing has changed…should I be putting it elsewhere?

1 Like
4

@ScentedRainbows

a.btn.hero__btn {
    font-size: 12px !important;
}

Add this code in the botton of theme.scss or theme.css file

5

Hi @ScentedRainbows

The reason that code isn’t working is because there is a missing } in the code.

If I look at the last few lines of your theme.css file now it looks like this:

.site-footer__hr {
    margin: 0px 0 20px 0; 
.btn.hero__btn {
    font-size: 2em;
}

It actually needs to look like this:

.site-footer__hr {
    margin: 0px 0 20px 0; 
}
.btn.hero__btn {
    font-size: 2em;
}

If you add the extra } you should then see it take effect!

6

This worked perfectly @SB_90 Thank you so much for the help!

1 Like