[Resolved] Line Spacing of Meta in Mobile View on Archive, Category, Author Pages

[Michelle]

In mobile view, the meta line spacing of archive, category, and author pages is quite narrow. How can I increase the line spacing? And letter spacing?

I am trying to make it easier to read.

(It looks squished and makes it hard to press on the category link when the lines are so close together)

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Michelle]

Sure. My credentials to log in are below.

[Tom]

Hi there,

You seem to have some custom CSS that’s making the meta font size quite small:

@media (max-width: 768px) {
    .archive .entry-meta {
        font-size: 0.7em;
    }
}

@media (max-width: 768px) {
    .entry-meta {
        font-size: 13px;
    }
}

If you remove that CSS, the meta should be larger and easier to read.

Let us know 🙂

[Michelle]

Hi Tom, I am happy with the font size.

What I’m trying to do is make the meta look the same on all pages. They look the same on all profiles except for mobile.

My single post, archive, category, and author pages have narrow spacing between lines (native WordPress pages)

My Home and Journal pages have wider spacing between lines (WP Show Posts Pro styling)

The important thing is that they look uniform. This is why I have CSS to decrease the font size, etc. I am trying to make the native WordPress pages match the WP Show Posts Pro pages.

[Ying]

Hi Michelle,

You changed Journal page meta font size to 1.1em?

So I changed your archive page’s meta font size to 1.1 in develop tool too, then they look pretty similar to me.
https://www.screencast.com/t/u2hjGU3A

What ever font size you use, just keeping the 2 match should be ok.

[Michelle]

Hello Ying.

Thank you for that, but what I am really wanting is a change of line spacing, not font sizing, and only for the mobile.

I uploaded two screenshots of what I am referring to and uploaded them to this page:

https://www.reachingmyworld.com/music

[Michelle]

This is what finally worked for me:

@media (max-width: 768px) {
.entry-meta {
line-height: 1.9;

I cobbled it together from a few website tutorials.

Thank you for the time you spent with me, all of you. I appreciate the help.

[Ying]

You are welcome!
Glad it works now 🙂

[Author]

Posts