Homepage Heading Desktop vs. Mobile

Technical Q&A
,

Topic summary

A user seeks to prevent their homepage heading from being reformatted on mobile devices, where text appears to break differently than on desktop.

Solutions Provided:

  • Option 1 (Moeed): Add custom CSS code to the theme.liquid file, just above the </body> tag, to control mobile font sizing using media queries.

  • Option 2 (NovakNorth906): Use the theme customizer’s built-in custom CSS feature instead:

    1. Navigate to Online Store → Customize
    2. Select the relevant section
    3. Add CSS targeting mobile screens (max-width: 767px) to adjust h2 font-size (suggested: 25px)

Discussion Notes:

  • NovakNorth906 suggests their approach is preferable as it uses the section-level custom CSS settings rather than editing core theme files.
  • The user confirmed their site is live (not password-protected).
  • The conversation concludes with the user thanking contributors for the solutions.

Status: Resolved with multiple working approaches provided.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

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

Desktop:

wymonster_1-1730367005102.png
wymonster_1-1730367005102.png1897×915 230 KB

Mobile:

wymonster_0-1730366984153.png
wymonster_0-1730366984153.png517×747 45.2 KB

2

Hey @wymonster

Share your Store URL and Password if enabled.

Best Regards,

Moeed

3

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

4

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

5

@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.

6

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

7

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 tag

NOTE: Adjust this font size accordingly to however you like

RESULT:

Moeed_0-1730482146689.png
Moeed_0-1730482146689.png370×660 53.8 KB

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

Best Regards,
Moeed

8

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

9

@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:

NovakNorth906_0-1730482540702.png
NovakNorth906_0-1730482540702.png1766×832 122 KB

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

Kind regards,

Mark

10

Thank you!

1 Like