mobile font size

Hi there,

for that to apply to Mobile you need to change your media query from:

@media (min-width: 769px) and (max-width: 1024px)

to:

@media (max-width: 1024px)

Hi, David.

I followed your instruction and I saw that the font changed to 16px in the customizer..but for some reason, the modified font size did not reflect on the mobile screen. Link to the website is in the private info field. Thanks.

@media (max-width: 1024px) {
body {
font-size: 16px;
}
}

Hi there,

Can you specify which exactly do you want this applied on? I've checked the site and the paragraph blocks are actually using the specified size as shown here - https://share.getcloudapp.com/QwuAz9nz

Perhaps you want it to apply on something specific like a heading? Let us know.

Hi,

I can only see the changes in the customizer but not on my mobile phone. If you may, I also want to have a much smaller font for headings on mobile.

I know how to do it but the changes are not reflected on a mobile screen.

The link to the website is in the private info field. Thanks.

Consider doing the following:

- Try clearing all cache. (perhaps you're seeing a browser cached version of the site)
- Try a smaller font than 16px.

I've rechecked the site to be sure and it definitely is using the CSS you've added. Perhaps 16px is too big for mobile.

See this video - https://share.getcloudapp.com/v1uYkrWv

As shown on the video, the p elements are actually using the font-size from your CSS. I toggled the font-size value to show that it's actually applying.

I think you just need to change the @media rule and the font size to this to make it more apparent.

@media (max-width: 768px) {
body {
font-size: 12px;
}
}

The suggested @media change is to make sure it only applies to mobile devices as @media (max-width:1024px) will also apply to large tablets and smaller desktops.

Hi, Alvin...I reduced the font size to 14 px for mobile..it worked! Thank you :)

No problem. :D