Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2267531
Mobile ease of use issues on site
Closed

Comments

  • Percasedescubrase started the conversation

    Hello,

    Google is detecting the following issues with the theme on mobile devices:

    • Text too small to read
    • Clickable elements are too close
    • Content wider than screen

    How could I solve?

    Thanks

  •  2,700
    PenciDesign replied

    Hi,

    With your issues:

    1/ "Text is to small" & "Clickable elements are too close" - please try add more this code to Customize > Custom CSS to fix it:

    @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; }
    }

    2/ For "Content wider than screen" I didn't see any issue on mobile. I've tested your site on 3 different phones and I didn't see any page has this issue. This issue caused by you have a page has more width with the screen of mobile.


    Best Regards,

    PenciDesign