Mobile Text Resizing

Store Design

Topic summary

Issue: Text appears too large on mobile for specific sections—homepage hero quote (“Fangirls are the untapped billion of …”) and footer quote (“The term fangirl is too often equated to…”) on sundayfangirls.store.

Proposed fix: Add responsive CSS in the theme’s main CSS file (base.css/style.css/theme.css) using a media query for small screens (max-width: 765px). Example provided:

  • .hero__rte … p { font-size: 30px; }
  • h2.hero__title … { font-size: 50px; }
    Sizes are adjustable. Screenshots illustrate results.

Follow-up request: Also reduce the main copy size on the About page (e.g., text beginning “This project is a cultural platform with the aim…”). Helper shared a targeted selector for that section and set .hero__rte p to font-size: 30px, with visual result shown. Same edit/save steps apply.

Latest update: User specified three exact paragraphs on the About page to scale down:

  • “This project is a cultural platform with the aim …”
  • “It all started with a two minute rant in 2021… inclusion in sports”
  • “We’ve adopted the pre-order and drop…”

Status: Ongoing. Initial mobile CSS solution provided and demonstrated; further refinement needed to precisely target the listed About page paragraphs. Images are central to understanding results.

Summarized with AI on December 30. AI used: gpt-5.
2

HI @codes

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

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:765px){
.hero__rte.body-size-15.font-body.block-padding.aos-animate p {
    font-size: 30px;
}
h2.hero__title.heading-size-9.block-padding.aos-animate {
    font-size: 50px;
}
}

And save.

Result:

Made4uoRibe_0-1714570508719.png
Made4uoRibe_0-1714570508719.png762×594 30.8 KB

Note: You can adjust the size of your liking.

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