Hello i just received a problem from Google: I want to know how to increase the fonts size of all the pages and also Clickable elements like buttons and navigation tabs and all clickable element are too close to each other, where can i find that to make them not close to each other.
Let's copy the code I sent you and "add more" ( not replace ) to the end of Customize > Custom CSS box.
After that, clear all the cache and check your site again on mobile to see - and check if you have any element has small font size or elements close together, let us know and we will help you more if needed.
Hello i just received a problem from Google: I want to know how to increase the fonts size of all the pages and also Clickable elements like buttons and navigation tabs and all clickable element are too close to each other, where can i find that to make them not close to each other.
Hi,
Please try add more this code to Customize > Custom CSS to do that:
@media only screen and (max-width: 479px) { ul.penci-topbar-menu > li a, div.penci-topbar-menu > ul > li a, .widget ul.side-newsfeed li .side-item .side-item-text .side-item-meta{ font-size: 14px; } body, p{ font-size: 16px; } #top-search > a > i, #navigation .button-menu-mobile > i{ line-height: inherit; } .penci-menuhbg-wapper{ display: none; } .widget #searchform input.search-input, .penci-sidebar-content .widget #searchform input.search-input, #footer-copyright *, .penci-topbar-social a{ font-size: 15px; } .widget-social.show-text a span{ font-size: 15px !important; } .footer-instagram h4.footer-instagram-title span, .item-related span.date{ font-size: 14px; } ul.footer-socials li, .author-content .author-social{ margin-right: 20px; } .penci-topbar-social a, .post-share a{ margin-left: 20px; } .post-share{ margin-top: 12px; } .penci-headline{ display: table; } .wp-caption p.wp-caption-text, .penci-featured-caption{ font-size: 15px; } .post-pagination h5{ font-size: 16px; } .cat>a.penci-cat-name, .penci-grid li .item .cat a, .penci-masonry .item-masonry .cat a, .penci-container-inside.penci-breadcrumb span, .penci-container-inside.penci-breadcrumb span a, .container.penci-breadcrumb span, .container.penci-breadcrumb span a, #sidebar-nav .menu li a, .penci-pagination a, .penci-pagination .disable-url { font-size: 14px; } .main-nav-social a{ font-size: 16px; margin-right: 17px; } .header-social a i{ font-size: 16px; margin-right: 7px; } .featured-style-23 .penci-item-1 .penci-mag-featured-content h3 a, .featured-style-23 .penci-item-2 .penci-mag-featured-content h3 a, .featured-style-23 .penci-item-3 .penci-mag-featured-content h3 a, .featured-style-23 .penci-item-4 .penci-mag-featured-content h3 a, .featured-style-23 .penci-item-5 .penci-mag-featured-content h3 a, .featured-style-23 .penci-item-0 .penci-mag-featured-content h3 a{ font-size: 15px; } }Best Regards,
PenciDesign
will this code increase the font size to at least 16, and also reduce the space between elements that are close together?
will the code solve both of my problems.
Hi,
If you want to increase all the fonts to 16px, you can replace the code I sent to this code:
@media only screen and (max-width: 479px) { ul.penci-topbar-menu > li a, div.penci-topbar-menu > ul > li a, .widget ul.side-newsfeed li .side-item .side-item-text .side-item-meta{ font-size: 16px; } body, p{ font-size: 16px; } #top-search > a > i, #navigation .button-menu-mobile > i{ line-height: inherit; } .penci-menuhbg-wapper{ display: none; } .widget #searchform input.search-input, .penci-sidebar-content .widget #searchform input.search-input, #footer-copyright *, .penci-topbar-social a{ font-size: 16px; } .widget-social.show-text a span{ font-size: 16px !important; } .footer-instagram h4.footer-instagram-title span, .item-related span.date{ font-size: 16px; } ul.footer-socials li, .author-content .author-social{ margin-right: 20px; } .penci-topbar-social a, .post-share a{ margin-left: 20px; } .post-share{ margin-top: 12px; } .penci-headline{ display: table; } .wp-caption p.wp-caption-text, .penci-featured-caption{ font-size: 16px; } .post-pagination h5{ font-size: 16px; } .cat>a.penci-cat-name, .penci-grid li .item .cat a, .penci-masonry .item-masonry .cat a, .penci-container-inside.penci-breadcrumb span, .penci-container-inside.penci-breadcrumb span a, .container.penci-breadcrumb span, .container.penci-breadcrumb span a, #sidebar-nav .menu li a, .penci-pagination a, .penci-pagination .disable-url { font-size: 16px; } .main-nav-social a{ font-size: 16px; margin-right: 17px; } .header-social a i{ font-size: 16px; margin-right: 7px; } .featured-style-23 .penci-item-1 .penci-mag-featured-content h3 a, .featured-style-23 .penci-item-2 .penci-mag-featured-content h3 a, .featured-style-23 .penci-item-3 .penci-mag-featured-content h3 a, .featured-style-23 .penci-item-4 .penci-mag-featured-content h3 a, .featured-style-23 .penci-item-5 .penci-mag-featured-content h3 a, .featured-style-23 .penci-item-0 .penci-mag-featured-content h3 a{ font-size: 16px; } }Best Regards,
PenciDesign
so i see some code lines numbered, do i add this code to it or I replaced all the lines of code with what u have sent.
and also what code do i use so can i can make all clickable element stay close together. cause Google says that is also a problem on my website.
Hi,
Let's copy the code I sent you and "add more" ( not replace ) to the end of Customize > Custom CSS box.
After that, clear all the cache and check your site again on mobile to see - and check if you have any element has small font size or elements close together, let us know and we will help you more if needed.
Best Regards,
PenciDesign