[Resolved] entry content font size and line height – mobile

[Tony]

hi Gp,

i’m trying to have the same font size and line height as below for all my website on mobile view. I understand the below applies only to posts, but I would like it to apply to all content with the same values, excluding the footer and header. can you adjust the css for me please? thank you.

@media (max-width: 420px) {
body.single-post .entry-content {
font-size: 18px;
line-height: 28px
}
}

use temp login if the need be. thank you.

[David]

Hi there,

for posts and pages, and to limit it to the content only, then try this CSS:

@media (max-width: 420px) {
    body #page {
        font-size: 18px;
        line-height: 28px
    }
}

NOTE: You have some content on your static pages where you used a Headline Block, and have set a specific font size on those blocks…. the above CSS won’t change them. You would need to remove those specific styles from those blocks to fix that.

[Tony]

hi David,

i’ve tried the above css, but when i view a post on mobile view, it still has the line height same as desktop…the above line height and font size is not applying posts on mobile…

please use temp log in to have a look…thank you.

[Ying]

Hi Tony,

It is using 28px as line height instead of 40px:
https://www.screencast.com/t/LzgiMiUqUrA

But the CSS is missing a ; after line-height , it should be:

@media (max-width: 420px) {
    body #page {
        font-size: 18px;
        line-height: 28px;
    }
}

[Tony]

Hi Ying,

i’ve corrected the above css and still the line height on mobile view for posts = 40px. however,

i’ve changed the css and added the following….

body.single-post .entry-content {
font-size: 20px;
line-height: 40px;
font-weight: 400;
}

@media (max-width: 768px) {
.entry-content {
font-size: 18px;
line-height: 28px
}
}

@media (max-width: 768px) {
body.single-post .entry-content {
font-size: 18px;
line-height: 28px
}
}`

i had to add another @media specifically for posts on the last bit of code, otherwise the top part did not work on its own and would not apply to posts.

the above works now. question is, can we make the css shorter and have the same effect?

[Ying]

You can remove this:

@media (max-width: 768px) {
.entry-content {
font-size: 18px;
line-height: 28px
}
}

[Tony]

hi Ying,

if i remove that, the line height and font size in mobile view goes back up to 20px font size and 40px line height again…which is the desktop values. having that there for some reason keeps my mobile view 18px and 28px

strange…i mean you can see for yourself using the temp link…feel free to remove the above and test it out.

[Ying]

I don’t see any changes on mobile after removing the CSS:
https://www.screencast.com/t/V7nxCsYkyX

Just make sure, you are trying to apply the mobile font size and line height for single post only?

If so, you should be able to remove this CSS:

@media (max-width: 768px) {
.entry-content {
font-size: 18px;
line-height: 28px
}
}

[Tony]

hi Ying,

i am trying to apply the 18px font and 28px line height to all content on the website on mobile view, excluding of course the footer and header etc, only the content…not just the post…

[Ying]

Ah I see, then you only need this CSS for mobile:

@media (max-width: 768px) {
body .entry-content p {
	font-size: 18px !important;
        line-height: 28px !important;
    }
}

[Tony]

thank you Ying, works just fine. appreciate the help.

[Ying]

You are welcome 🙂

[Author]

Posts