Separate heading sizes for desktop and mobile for 'image with text' section

Store Design
, ,

Topic summary

A user is attempting to reduce the heading size in Shopify’s ‘image with text’ section on mobile devices while maintaining the desktop size. Their current CSS code in base.css isn’t working as expected.

Problem identified:
The original code appears corrupted or improperly formatted, preventing the mobile-specific styling from applying correctly.

Solutions provided:
Multiple respondents offered corrected CSS code snippets with two main approaches:

  • CSS-only solution: Add properly formatted media queries to base.css targeting .image-with-text__heading with font-size: 14px for mobile (max-width: 749px or 767px) and font-size: 28px for desktop (min-width: 750px)

  • Alternative approach: Insert the CSS within <style> tags in theme.liquid file above the </body> tag, using !important flag to ensure the mobile styles override defaults

Key technical details:
The solutions use @media queries to apply different font sizes based on screen width, with mobile breakpoints around 749-767px. All respondents emphasized proper code placement in either base.css or theme.liquid files.

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

Hi,

I am trying to make the heading in the image with text section smaller so it doesn’t get cut off, but I want to keep it the size it currently is on desktop. This is the code I am currently using in base.css but the mobile heading size doesn’t seem to be changing.

Can anybody help?

TIA!

/* IMAGE WITH TEXT SIZE mobile */
@media all and (min-width: 750px) {
.image-with-text__heading {
font-size: 14px;
}
}

/* IMAGE WITH TEXT SIZE desktop */
.image-with-text__heading {
font-size: 28px;
}
}

Screenshot 2024-09-21 at 19.05.04.png
Screenshot 2024-09-21 at 19.05.04.png834×748 90.7 KB

Screenshot 2024-09-21 at 19.05.12.png
Screenshot 2024-09-21 at 19.05.12.png2118×590 112 KB

3 Likes
2

Hi @visualess

  • Go to Online Store → Theme → Edit code.
  • Find the file assets/base.css and paste the code below at the bottom of the file.
/* IMAGE WITH TEXT SIZE - mobile */
@media all and (max-width: 750px) {
  .image-with-text__heading {
    font-size: 14px;
  }
}
/* IMAGE WITH TEXT SIZE - desktop */
.image-with-text__heading {
  font-size: 28px;
}
3

This is Richard from PageFly - Shopify Page Builder App

Hi @visualess Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag 

@media all and (max-width: 767px) {
  .image-with-text__heading {
    font-size: 14px !important;
  }
}

.image-with-text__heading {
  font-size: 28px;
}

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

4

Hi @visualess

Check this one.

/* IMAGE WITH TEXT SIZE mobile */
@media all and (max-width: 749px) {
    .image-with-text__heading {
        font-size: 14px;
    }
}

/* IMAGE WITH TEXT SIZE desktop */
.image-with-text__heading {
    font-size: 28px;
}

And save.

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