When viewing on mobile, the blog posts’ page numbers overlap with the words ‘Page 1 of x’. How can I fix this?
Hey Kieran,
Thank you for writing to us.
I checked your site and noticed that there is not enough space for the pagination info to be displayed on the mobile device. The best you can do to avoid it looking messy is to hide this info on mobile device.
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
@media(max-width:580px) {
span.pagination-meta {
display: none;
}
You may not see the changes until the cached files are cleared in your browser.
Please perform the below steps to clear the browser cache:
1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.
Best regards,
Vinay
Why isn’t there anough space? Is there no way to make the blog posts element work as intended on mobiles?
Hi,
Please add following code to Quick CSS in Enfold theme options > General Styling
@media only screen and (max-width: 480px) {
span.pagination-meta {
position: initial;
}}
That should move pagination meta to the right hand side on mobile.
Regards,
Yigit
Thanks Yigit that works perfectly!