How can I make the text size on my homepage's slideshow different for mobile and desktop?

Store Design
1

I want to optimize the font size of the words “The Power of Nature” for mobile and desktop, but the sizes are obviously different and there doesn’t seem to be a way to set the font size by device. Is there a way to set the font size for just some of the words in the slideshow? Any help would be greatly appreciated.

https://untamedtallow.com/

2

@untamedtallow ,

Yes, You can set the font sizes for both.

desktop :

h2.banner__heading.h1 {
    font-size: 43px;
}

Mobile :

@media only screen and (max-width: 768px) {
h2.banner__heading.h1 {
    font-size: 20px;
}
}

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

3

Hi @untamedtallow ,

Here’s how you can customise font-size depending on device size, follow this below…

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code

  2. In the Asset folder, open the section-image-banner.css

  3. Paste the code below at the very bottom of the file.

.banner__box .banner__heading {
    margin-bottom: 0;
    font-size: 49px !important;
}

@media screen and (max-width: 749px){
    .banner__box h2.banner__heading.h1 {
         font-size: 49px !important;
     }
 }

Adjust px to what you desire.

And if this was helpful, please mark it as a solution and leave a like.

Thanks

1 Like
4

Thank you! This worked, but is there a way to change the font size separately for the words “The power of nature” and the word “Untamed”? I don’t want the font size to be the same through the whole phrase.