How do you make the button and font size larger?

Store Design
1

Hi everyone,

I’m trying to increase the size and font of my buttons to improve the CTAs when people land on my page. From what I can see there is no option in the theme I’m using.

Any help would be greatly appreciated. Website below:

https://outdoorroadie.co.uk/pages/top-10-rooftop-tents

2

@GazzaOR - which button and font sizes do you want to increase?

3

The blue buttons that link the products. Thanks for replying

4

hello, GazzaOR, good morning.

You can try going to online store > themes > actions > edit code and, at the end of theme.css, add

@media screen and (min-width: 860px) {
.alt-img-with-text--content .alt-img-with-text--text .alt-img-with-text--button:not(.button-signpost) {
    font-size: var(--font-size-button-large);
}
}
5

Hi,

Thanks for the suggestion. It unfortunately hasn’t changed as seen below:

https://outdoorroadie.co.uk/pages/top-10-rooftop-tents

6

hey, Gazza, I’m seeing your file, it has something wrong. Right now it’s ending as:

@media only screen and (max-width: 600px) {
.column-one, .column-two, .column-three{
order: 1;
order: 2;
order: 3;

  @media screen and (min-width: 860px) {
.alt-img-with-text--content .alt-img-with-text--text .alt-img-with-text--button:not(.button-signpost) {
    font-size: var(--font-size-button-large);
}
}

and it should end as:

@media only screen and (max-width: 600px) {
.column-one, .column-two, .column-three{
order: 1;
order: 2;
order: 3;
}
}

  @media screen and (min-width: 860px) {
.alt-img-with-text--content .alt-img-with-text--text .alt-img-with-text--button:not(.button-signpost) {
    font-size: var(--font-size-button-large);
}
}
7

Hi,
Thanks for the correction. I added that in but it still hasn’t changed in size. Maybe there is code elsewhere that overwrites it?

Thank you in advance.