[Resolved] Correct Vertical Mobile View For Category, Author, And Archive Page Meta

[Michelle]

On vertical mobile view: The size of my meta on the vertical mobile profile of category, author, and archive pages doesn’t match the meta in any other profile (desktop, tablet, horizontal mobile). It gets huge when the two column layout goes to single column. I’d like to know how to correct for this so the meta looks the same in one column as two.

[Ying]

Hi Michelle,

Try this CSS:

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

Let me know 🙂

[Michelle]

It is better than it was, but it made the font smaller on the Home and Journal page meta as well on all views (Desktop, Tablet, and Mobile). What I really want is only the meta on the Category, Author, and Archive pages in the mobile vertical view to change. I hope I am making sense. 🙂

[Ying]

I added a media query to the CSS which make the CSS only works on mobile:
https://generatepress.com/forums/topic/correct-vertical-mobile-view-for-category-author-and-archive-page-meta/#post-1628349

The selector .archive .entry-meta should not effect your home page and journal page, since these 2 pages are static pages, not archives.

.archive includes blog/date archive/author archive/category archive/tag archive etc. If you don’t want the CSS apply to some of the archive pages, let me know 🙂

[Michelle]

I believe you. I cleared my cache and it fixed things on the Home page.

Could we approach this backwards and just make the mobile home and journal page meta larger? My goal is to have the meta match on all pages of the mobile site. I think it will be easier to read if it is larger anyway.

[Ying]

Yes, of course 🙂

Then replace the CSS I provided before with this:

@media (max-width: 768px) {
    .wp-show-posts-entry-meta {
        font-size: inherit;
    }
}

[Michelle]

Am I doing something wrong? It didn’t work. I put it in the Additional CSS. I am putting my credentials below. Could you maybe take a look?

[Elvin]

Am I doing something wrong? It didn’t work. I put it in the Additional CSS. I am putting my credentials below. Could you maybe take a look?

Can you try this CSS instead? inherit is pretty tricky.

@media (max-width: 768px){
.wp-show-posts-entry-meta {
    font-size: .8em;
}
}

Let us know.

A wise man once said:
"Have you cleared your cache?"

[Michelle]

Thank you for the code. I played with the font size and could adjust it properly.

[Elvin]

Thank you for the code. I played with the font size and could adjust it properly.

No problem. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts