How to change font size of blog paragraph text on mobile only

Store Design
,

Topic summary

Main issue: Increase blog paragraph font size on mobile only (desktop remains 18px; desired mobile size 21px).

Working solution: Adding a CSS media query in theme.liquid before the closing tag. Code targets .Article__Body at max-width: 767px with font-size: 21px and line-height: 31px. The OP confirmed this fixed the mobile paragraph sizing.

Alternative that didn’t work: A suggestion to place a similar @media rule in theme.css (with 20px) did not work for the OP.

Follow-up request: Also increase the blog title size on mobile. Additional CSS (in the same mobile media query) targeted h1.Article__Title.Heading.u-h1 (set to 25px font-size and 35px line-height) and h3 headings within the article body. The OP confirmed this worked and slightly reduced the H1 size to preference.

Outcome: Resolved. Mobile typography (paragraphs and titles) updated via CSS media queries without affecting desktop; no further open questions noted.

Summarized with AI on January 8. AI used: gpt-5.
1

Hi, I need some guidance on how to update the font size of the blog paragraph text for mobile only. I’m happy with the current settings for the desktop version.

Here is an example:
https://zinplex.co.za/blogs/blog/what-zinc-does-for-the-body-supporting-fertility-for-both-men-and-women

On Desktop the paragraph font size is set to 18px, but I would like it set to 21px on mobile, for better readability.

2

Hello @ZinTech

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width:767px){ .Article__Body { font-size: 21px !important; line-height:31px !important; } }

techlyser_web_0-1704972469135.png
techlyser_web_0-1704972469135.png216×327 10.9 KB

3

Hi @ZinTech

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code in theme.css

@media screen and (mqaqx-width:767px){
.Article__Body {
font-size: 20px !important;
line-height:31px !important;
}
}

4

Thanks @niraj_patel that worked great!

5

Thanks for suggestion, in my case this didn’t work.

6

Now that the paragraph text is bigger for mobile, I need to increase the font size for the Blog title as well. How would I go about that?

7

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width:767px){ .Article__Body.Rte h3 { font-size: 22px; line-height: 32px; } h1.Article__Title.Heading.u-h1 { font-size: 25px; line-height: 35px; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

8

Thanks @niraj_patel that also worked. I made the font size for H1 a little smaller, but otherwise it is 100% on mobile.