Homepage Heading Desktop vs. Mobile

[wymonster]

Is there any code I can use so my heading on my homepage doesn't get reformatted on Mobile?

Desktop:

Mobile:

[Moeed]

Hey @wymonster 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[NovakNorth906]

Hi @wymonster ! There are a couple things that could help fix this. Could you please share your store URL and password if required?

Kind regards,

Mark

[wymonster]

I am not willing to give someone access to the backend of my website

[NovakNorth906]

@wymonster Sorry for the misunderstanding, that is not what I was asking. Essentially what I am asking is if you could share a "preview" URL to view the frontend of your site. Sometimes stores that are still in development mode have a preview that is password restricted. This is completely separate from your back end.

[wymonster]

Thank you for clarifying! And my website is live: www.wyldyears.com

[Moeed]

Hey @wymonster 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
h2.banner__heading.inline-richtext.h0 {
    font-size: 25px !important;
}
}
</style>

NOTE: Adjust this font size accordingly to however you like

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[NovakNorth906]

@Moeed Wouldn't it be better to add via custom CSS section setting?

[NovakNorth906 · Accepted solution]

@wymonster Here is what you should do:

1. Online store
2. Find theme > customize
3. Select that section
4. Bottom of section settings add this in custom css

@media screen and (max-width: 767px) {
  h2 {
    font-size: 25px;
  }
}

See screenshot below:

If this helped please make sure to  like it and mark it as solution

Kind regards,

Mark

[wymonster]

Thank you!