Too small font-size on mobile

[bracas]

Hi,

We use the scaling font size mode in theme options but minimum font size is set top 12px but on mobile it’s less than 12px which isn’t good at all for mobile best practice. When users might have hard time to read font size below 12px.

What I see is that entry content tag is using 0.9rem and not listening to those rules. From what I see and know I should not have added this 0.9rem on body content.

Update:
Found this code in custom CSS so must have been added by me. What can I use in VW or rem to use 14px on desktop and tablet and 12px on mobile? Best solution with a simple row of code by not using media queries.

entry-header, .entry-content {
    font-size: 0.9rem;
}

[paul.r]

Hi,

Please note of the following

rem Relative to font-size of the root element

The root font-size of your site is 16px so 2rem is 32px.

vw Relative to 1% of the width of the viewport*

You can use this calc to get your vw
http://emilolsson.com/tools/vw-unit-calc-an-online-responsive-css-font-size-calculator/

For what you are trying to achieve, it’s best to use media queries.

.entry-header, .entry-content {
    font-size: 14px;
}
@media(max-width:767px) {
.entry-header, .entry-content {
    font-size: 12px;
}
}

For reference regarding css units, kindly refer to the link below.

https://www.w3schools.com/cssref/css_units.asp

Thanks

[bracas]

Ok I agree @media might be the best solution here. Thanks!

[jade]

You’re welcome.