How can I adjust the banner heading font size only on desktop?

[Atsimataves]

Hello,

I have a problem with banner.heading font size. I want to change font size, but ONLY ON DESKTOP. 

Website: amberound.com

Before:

After:


Thanks!

[Made4uo-Ribe · Accepted solution]

Hi @Atsimataves 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "section-image-banner.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (min-width: 749px){
.slideshow__text.banner__box .banner__heading {
    font-size: 50px;
}
}

And Save. 

Result:

You can adjust the sizes you like. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Made4uo-Ribe · Accepted solution]

Hi @Atsimataves 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "section-image-banner.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (min-width: 749px){
.slideshow__text.banner__box .banner__heading {
    font-size: 50px;
}
}

And Save. 

Result:

You can adjust the sizes you like. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[formuladoctor]

In my case, the Image Banner element is under the section-image-banner.css

This code worked for adjusting the header height and the text height, specified in vw for responsiveness

@media only screen and (min-width: 749px){
.banner__box .banner__heading {
font-size: 5vw;
}
.banner__box .banner__text {
font-size: 3.5vw;
}
}
@media only screen and (max-width: 749px){
.banner__box .banner__heading {
font-size: 7vw;
}
.banner__box .banner__text {
font-size: 5.5vw;
}
}

[niraj_patel · Accepted solution]

Hello @Atsimataves 

You can add code by following these steps 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>

     @media screen and (min-width:767px){
          .banner__heading {
             font-size: 30px !important;
         }
         .banner__box{
              left:-28% !important;
          }
}

</style>

[Atsimataves]

@niraj_patel , boooom! It works. :)) May I know if I want to change the text below how I can do that? Now it looks a little too small "Women's Jewelry".

Thanks a lot!

[niraj_patel]

Hello @Atsimataves 

You can add code by following these steps 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>

     @media screen and (min-width:767px){
              .banner__text.rte p {
                   font-size: 22px !important;
              }
        }

</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Atsimataves]

@niraj_patel Thank you very much! 💛

[niraj_patel]

Welcome😊

[Bren_oc]

hi there can will the positioning change for mobile to?