- This topic has 11 replies, 3 voices, and was last updated 4 months ago by
.
-
Posts
-
I have noticed the issue in two installations already. It’s minor but it’s there:
The
entry-metaon the single post has afont-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?
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?"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.A wise man once said:
"Have you cleared your cache?"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.
A wise man once said:
"Have you cleared your cache?"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/issuesA wise man once said:
"Have you cleared your cache?"Thanks for the link, Elvin, I raised the issue on Github, as well!
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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOk, I suspected so, to be honest.
Thanks, Tom!
No problem! 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development
- You must be logged in to reply to this topic.