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

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

Home Forums Support Correct Vertical Mobile View For Category, Author, And Archive Page Meta

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1628241
    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.

    #1628349
    Ying
    Staff
    Customer Support

    Hi Michelle,

    Try this CSS:

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

    Let me know πŸ™‚

    #1628500
    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. πŸ™‚

    #1628542
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1628554
    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.

    #1628609
    Ying
    Staff
    Customer Support

    Yes, of course πŸ™‚

    Then replace the CSS I provided before with this:

    @media (max-width: 768px) {
        .wp-show-posts-entry-meta {
            font-size: inherit;
        }
    }
    #1628766
    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?

    #1628783
    Elvin
    Staff
    Customer Support

    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?"

    #1629637
    Michelle

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

    #1632027
    Elvin
    Staff
    Customer Support

    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?"

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.