On the advice of my ad network I have increased the font size of H tags and body content wherever possible in Customise. This is to help max my ad revenue.
However there are some fields where I can't work out how to increase font size and some areas where the font size looks wrong on mobile format.
I also have one other issue with layout on mobile:
Issues:
- Section titles font is too small in comparison to H1 font size for posts in Homepage Popular Posts Box
- H1 title font is very small within the featured categories (Magazine layout) on homepage, especially compared to content font
- H1 title font on post pages is really small and I can't work out how to change it
- All content on posts displays as centred on mobile, rather than left aligned.
- Bullet points sit right on the edge of the screen rather than indented on mobile
Look forward to hearing back from you. Thanks, Luci
Yeah, on the mobile, if we still display font size like on the desktop - the titles can get big because the screen on mobile is too small.
So, if you want to change it.
1/ Change the font size for posts titles on the homepage - add more this code to Customize > Custom CSS:
.home-featured-cat-content .first-post .magcat-detail h3 a,
.penci-grid li .item h2 a, .penci-masonry .item-masonry h2 a{
font-size: 24px;
}
.home-featured-cat-content .magcat-detail h3 a{
font-size: 18px;
}
2/ Change section title font size on homepage popular posts - add more this code to Customize > Custom CSS:
@media only screen and (max-width: 479px){
.home-pupular-posts-title {
font-size: 20px;
}
}
3/ Change font size of posts title on homepage on mobile - add more this code to Customize > Custom CSS:
@media only screen and (max-width: 479px){
.home-featured-cat-content .first-post .magcat-detail h3 a,
.penci-grid li .item h2 a, .penci-masonry .item-masonry h2 a{
font-size: 22px;
}
.home-featured-cat-content .magcat-detail h3 a{
font-size: 18px;
}
}
4/ Change heading titles on pots pages on mobile - add more this code to Customize > Custom CSS:
@media only screen and (max-width: 479px){
.header-standard .post-title, .header-standard h2 a, .penci-page-header h1{ font-size: 24px; }
}
5/ Seem you have a plugin caused this issue. As I checked your site you have a custom css to make your site center on mobile, no problems, you can add more this code to Customize > Custom CSS to fixed it:
@media only screen and (max-width: 767px){
.right-sidebar, #main, #sidebar{ text-align: left; }
}
6/ You can add more this code to Customize > Custom CSS to add more extra padding left for bullet points:
@media only screen and (max-width: 767px){
.post-entry ul, .post-entry ol{ padding-left: 40px; }
}
I also have one more question... is there a way to add in a newsletter sign up form that displays at the bottom of each post? I use MailerLite, so can't make use of the MailChimp options you have.
Hi there
On the advice of my ad network I have increased the font size of H tags and body content wherever possible in Customise. This is to help max my ad revenue.
However there are some fields where I can't work out how to increase font size and some areas where the font size looks wrong on mobile format.
I also have one other issue with layout on mobile:
Issues:
- Section titles font is too small in comparison to H1 font size for posts in Homepage Popular Posts Box
- H1 title font is very small within the featured categories (Magazine layout) on homepage, especially compared to content font
- H1 title font on post pages is really small and I can't work out how to change it
- All content on posts displays as centred on mobile, rather than left aligned.
- Bullet points sit right on the edge of the screen rather than indented on mobile
Look forward to hearing back from you. Thanks, Luci
Hi,
Yeah, on the mobile, if we still display font size like on the desktop - the titles can get big because the screen on mobile is too small.
So, if you want to change it.
1/ Change the font size for posts titles on the homepage - add more this code to Customize > Custom CSS:
.home-featured-cat-content .first-post .magcat-detail h3 a, .penci-grid li .item h2 a, .penci-masonry .item-masonry h2 a{ font-size: 24px; } .home-featured-cat-content .magcat-detail h3 a{ font-size: 18px; }2/ Change section title font size on homepage popular posts - add more this code to Customize > Custom CSS:
@media only screen and (max-width: 479px){ .home-pupular-posts-title { font-size: 20px; } }3/ Change font size of posts title on homepage on mobile - add more this code to Customize > Custom CSS:
@media only screen and (max-width: 479px){ .home-featured-cat-content .first-post .magcat-detail h3 a, .penci-grid li .item h2 a, .penci-masonry .item-masonry h2 a{ font-size: 22px; } .home-featured-cat-content .magcat-detail h3 a{ font-size: 18px; } }4/ Change heading titles on pots pages on mobile - add more this code to Customize > Custom CSS:
@media only screen and (max-width: 479px){ .header-standard .post-title, .header-standard h2 a, .penci-page-header h1{ font-size: 24px; } }5/ Seem you have a plugin caused this issue. As I checked your site you have a custom css to make your site center on mobile, no problems, you can add more this code to Customize > Custom CSS to fixed it:
@media only screen and (max-width: 767px){ .right-sidebar, #main, #sidebar{ text-align: left; } }6/ You can add more this code to Customize > Custom CSS to add more extra padding left for bullet points:
@media only screen and (max-width: 767px){ .post-entry ul, .post-entry ol{ padding-left: 40px; } }Best Regards,
PenciDesign
Hi there
Thanks so much for all of the solutions.
I also have one more question... is there a way to add in a newsletter sign up form that displays at the bottom of each post? I use MailerLite, so can't make use of the MailChimp options you have.
Thanks, Luci
Hi,
I think you can use option from Customize > Single Post Options > Add Google Adsense code in the end of content posts.
You can add custom HTML or shortcode there.
Best Regards,
PenciDesign
It's worked perfectly, thank you.