-
I’m using a content template for single blog posts and home page. I need to show an estimate in both my blog post and on the home page, as the screenshots below.
https://i.imgur.com/GG2OeqY.png
https://i.imgur.com/ZhmhM3A.png -
Hi there,
I would recommend using a plugin to generate the estimated time.
Or you can give this solution a try:
https://generatepress.com/forums/topic/read-time-for-a-blog-post/page/2/#post-1968767 -
Yes, I got it worked with the 2nd option, but how do I adjust the font size of the text?
-
Fernando
Hi there,
Try adding this through Appearance > Customize > Additional CSS:
div.read-time { font-size: 20px; }
-
ok, thank you got it.
-
Fernando
You’re welcome, Paul!
-
one more question, how to change the font size of “reading time” in mobile for different size?
-
Fernando
You can remove the code I shared, then go to Appearance > Customize > Typography, and add a new rule for target Element Custom –
div.read-time
.Doing this would allow you to modify the font settings for the Reading time on Desktop, Tablet and Mobile.
-
Sorry, I’m still stuck with the mobile single post layout; this is working fine for the desktop.
Screenshot: https://i.imgur.com/p3iXSzy.jpeg
I need the reading time to appear near the category text, and it should be matching with the same text size.
-
Fernando
Have you created the Typography rule I mentioned? Example: https://share.zight.com/NQuBl7dP
Alternatively, you can try adding this through Appearance > Customize > Additional CSS:
@media (max-width: 768px) { /* CSS in here for mobile only */ div.read-time { font-size: 14px; } } @media (min-width: 769px) and (max-width: 1024px) { /* CSS in here for tablet only */ div.read-time { font-size: 16px; } } @media (min-width: 1025px) { /* CSS in here for desktop only */ div.read-time { font-size: 20px; } }
-
Thank you so much, everything is working fine now.
-
Fernando
You’re welcome!
- You must be logged in to reply to this topic.