Change the size of the text in some sections only on mobile

Technical Q&A

Topic summary

Goal: reduce font size for specific homepage sections on mobile in a Shopify theme. Attempts to edit theme.css failed.

Diagnosis: existing CSS rules used !important (a CSS flag that forces a rule’s priority), making simple overrides ineffective. One such rule was in custom.css.

Solution provided: add mobile-only CSS using media queries (max-width: 768px) and place it at the bottom of the theme’s CSS so it loads last. Targeted selectors were the section header (.sitewide–title-wrapper h2.homepage-sections–title) and the paragraph text (.rte.featured-row__subtext.textarea p), setting the desired font sizes and using !important to override earlier rules.

Implementation steps: Admin > Online Store > Themes > Actions > Edit code; open the Asset file (theme-index.min.css) and append the mobile-specific rules at the end.

Outcome: the changes worked as intended; the requester confirmed success.

Notes: screenshots were included showing the affected sections and a code snippet location, but the core fix was the mobile media-query override. Status: resolved.

Summarized with AI on February 7. AI used: gpt-5.
1

Hello !

I would like to change the text size on these sections on my homepage, only on the mobile version of my site. I’ve tried to c/c code snippets in the theme.css to change the font size but nothing works.

Do you know how I could do it?

Section1.PNG
Section1.PNG2536×514 118 KB

Section2.PNG
Section2.PNG2545×544 134 KB

Here is my website : https://archi-v.myshopify.com/

Thank you in advance for your help!

Hugo

1 Like
2

Hi @Ogap31 ,

You are having hard time changing the font size because you use !important. One of the code is in the custom.css file under the Asset folder. (See image below)

made4Uo_0-1665172327640.png
made4Uo_0-1665172327640.png470×401 14.4 KB

You can add the code below to replace the code when it is on mobile.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the theme-index.min.css
  3. Paste the code below at the very bottom of the file.

For the header:

NOTE: Replace the 25px to the size you want.

@media only screen and (max-width: 768px) {
.sitewide--title-wrapper h2.homepage-sections--title {
  font-size: 25px !important;
}
}

For the paragraph:

NOTE: Replace the 20px to the size you want.

@media (max-width: 768px){
.rte.featured-row__subtext.textarea p {
    font-size: 20px !important;
}
}
1 Like
3

Thank you very much for your help, indeed I was not adjusting the lines in the right file.

Thanks again, it works perfectly now! :slightly_smiling_face: