Text smaller on mobile view

Shopify Discussion

Topic summary

Issue: The video banner heading text is too large on mobile, obscuring the image on ausomeapparelco.com.

Proposed fix: Add a mobile-specific CSS rule via Shopify theme files.

  • Path: Online Store > Themes > Edit code > Assets > open base.css / style.css / theme.css.
  • Add a media query for small screens (max-width: 550px) targeting the banner heading selector “h2.banner__heading.inline-richtext.h2”.
  • Settings: font-size: 1.5rem; width: 50%.
  • Save changes.

Rationale: The media query applies only on mobile widths, reducing the heading size and constraining its width to avoid covering key parts of the banner image.

Artifacts: A screenshot was provided showing the expected smaller heading on mobile (image helps illustrate the outcome).

Status: A concrete solution was provided with steps and CSS. No confirmation from the original poster yet; resolution pending.

Summarized with AI on December 15. AI used: gpt-5.
1

Hello:

I need my text on the video banner to be smaller on mobile view. It is blocking the image

Url:ausomeapparelco.com

2

Hi @bnbrown88

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.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 (max-width: 550px){
h2.banner__heading.inline-richtext.h2 {
    font-size: 1.5rem;
    width: 50%;
}
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!