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

[Ogap31]

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?

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

Thank you in advance for your help!

Hugo

[made4Uo · Accepted solution]

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)

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;
}
}

[Ogap31]

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

Thanks again, it works perfectly now! 🙂