[Resolved] Possible bug or ommision: entry-meta font size on mobile

Home Forums Support Possible bug or ommision: entry-meta font size on mobile

  • This topic has 11 replies, 3 voices, and was last updated 4 months ago by Tom.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1505400
    George

    I have noticed the issue in two installations already. It’s minor but it’s there:

    The entry-meta on the single post has a font-size: 85%; property but it switches back to 100% on mobile. As a result, the single post meta is slightly larger on mobile and it usually needs to be reset back to 85% or smaller.

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

    Is that by design?

    #1505411
    Elvin
    Staff
    Customer Support

    Hi,

    Yes it is added by default on the theme’s css files as this:

    .entry-meta {
    	font-size: 85%;
    	margin-top: .5em;
    	line-height: 1.5;
    }

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

    #1505413
    George

    Yes, what I am trying to say is that the font size gets reset back to 100% on mobile. Meaning that the font size gets slightly larger again on mobile and I am thinking that this has been slipped in there by mistake…

    #1505427
    Elvin
    Staff
    Customer Support

    Strange.

    Can you link us to the part of the site where this occurs?

    So we could fully check what happens.

    By default, there’s no @media query wrapping the css selector w/ the font-size: 85%; so it should use the same properly value across all viewports.

    Unless, there’s a custom CSS being added somewhere that prevents this from happening.

    Also, it could be possible to have the font look bigger on mobile than desktop/tablet even when the font-size is set to the exact same percentage values when desktop/tablet view .entry-meta‘s parent container width on is smaller than mobile’s viewport width.

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

    #1505439
    George

    Hi Elvin, I am sorry, quite busy right now, I can’t upload anything to show you at the moment. I believe you should have a version of a GP install on a fresh WP installation for testing, maybe try it there? I have just tried it on a fresh install no need for GPP, it’s a GP issue, I reckon.

    Check the “Hello World!” post meta font on mobile.

    #1505459
    Elvin
    Staff
    Customer Support

    Hi Elvin, I am sorry, quite busy right now, I can’t upload anything to show you at the moment. I believe you should have a version of a GP install on a fresh WP installation for testing, maybe try it there? I have just tried it on a fresh install no need for GPP, it’s a GP issue, I reckon.

    Oh sure no problem.

    And my apologies, I missed this:

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

    This is the one causing the font size to go larger because it inherits the exact font-size (17px) assigned on <body> on mobile viewport as compared to the the 85% of 17px font-size being used on bigger viewports.

    To answer the question: It isn’t exactly a bug, but simply, an intended default setting as it is directly written in the theme’s css files. Which can easily overwritten by custom CSS as you mentioned.

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

    #1505504
    George

    I am aware this is a default setting, I just think it might have been done by accident. GP versions prior to 2.1.3 didn’t have that issue. The issue was introduced on GB 2.1.3. Having elements go larger on a mobile view doesn’t seem natural. Something for Tom to have a look at, maybe?

    #1505522
    Elvin
    Staff
    Customer Support

    I am aware this is a default setting, I just think it might have been done by accident. GP versions prior to 2.1.3 didn’t have that issue. The issue was introduced on GB 2.1.3.

    Perhaps it is overlooked.

    Having elements go larger on a mobile view doesn’t seem natural.

    From a UI designer’s standpoint, I actually agree.

    Something for Tom to have a look at, maybe?

    Sure, will tag this to Tom.

    Alternatively, you can log bug reports on the GeneratePress github page. 🙂
    https://github.com/tomusborne/generatepress/issues

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

    #1505911
    George

    Thanks for the link, Elvin, I raised the issue on Github, as well!

    #1506661
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This is by design. When the font size remains at 85% on mobile, the tap target is too small and triggers mobile issues with Google.

    Resetting it back to the body font size makes for a larger tap target and a better mobile experience for users.

    #1506669
    George

    Ok, I suspected so, to be honest.

    Thanks, Tom!

    #1506672
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.