Archived topic
Possible bug or ommision: entry-meta font size on mobile
11 replies · Started by George on October 26, 2020
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?
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;
}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...
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.
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.
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.
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?
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
Thanks for the link, Elvin, I raised the issue on Github, as well!
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.
Ok, I suspected so, to be honest.
Thanks, Tom!
No problem! :)
