How can I increase the font size on my banner image for desktop view only?

Technical Q&A
1

I’d like to increase the font size of the text on my banner image - both the headline and the caption - on desktop but not on mobile.

Is anyone able to help me with how to code this please?

I found this elsewhere and tried, but it didn’t change anything.

.banner-section .content .title {
    font-size: 25px!important;
}

www.bonzadogtreats.com.au

Thanks for any help.

2

Hello,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->timber.scss.liquid

@media only screen and (min-width: 768px){
#shopify-section-160860061017de4874 .banner-image .headline {
    font-size: 3em !important;
}
#shopify-section-160860061017de4874 .banner-image .caption {
    font-size: 1.5em !important;
}
}
3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > timber.scss.liquid and paste this at the bottom of the file:
@media only screen and (min-width: 768px) {
.banner-image .headline {
font-size: 30px!important;
}
.banner-image .caption {
font-size: 17px!important;
}
}
4

Perfect, thank you so much.