Change image banner text colour on mobile view only

Shopify Discussion

Topic summary

Goal: change the image banner’s body text color to black on mobile view only in a Shopify theme.

Proposed fix #1:

  • Edit code: Online Store > Theme > Edit code > base.css.
  • Add a media query for small screens: @media (max-width: 767px) { .banner__text.rte.subtitle p { color: black !important; } }.
  • Targets paragraph text within the banner on mobile; uses !important to override theme styles.

Alternative fix #2:

  • Add Custom CSS in Online Store > Themes > Customize for the specific section.
  • Use: @media (max-width: 749px) { .banner__text.subtitle { color: #252525; } }.
  • Applies to the banner text container; slightly different breakpoint and color hex.

Notes:

  • Central elements are the CSS media queries (mobile-only) and selectors (.banner__text.rte.subtitle p vs .banner__text.subtitle).
  • An image/screenshot was shared, but the code snippet is the key artifact.

Outcome:

  • The user confirmed the solution worked.
  • Status: resolved; no further action requested.
Summarized with AI on December 26. AI used: gpt-5.
5

You are welcome @tallowbar :blush: