Support » Plugin: MarketPress - WordPress eCommerce » google mobile insights

  • Resolved flyfisher842

    (@flyfisher842)


    I am tired of insights dinging me about tap targets too close. I am using the Store page with store navigation short code to display all my product categories. Where is the CSS file and lines to adjust the line spacing farther apart for this short code display?

    It is not a theme issue. When I switched to the posts page with this theme, Insights scored 100 on user in mobile.

    https://wordpress.org/plugins/wordpress-ecommerce/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter flyfisher842

    (@flyfisher842)

    How do I style the list properties of the mp_list_categories short code list to increase the line spacing between the displayed categories instead of just a
    . They are too close together as tap targets for mobile according to Google insights.

    This styling thing is going to become an issue since Google went on a tear 1/19/15 about making web pages “mobile friendly”.

    Thread Starter flyfisher842

    (@flyfisher842)

    Too bad WPMU is not interested in fixing MP Lite to deliver Mobile Friendly webpages. Must not be many people checking their webmaster tools messages these days.

    Leaves me no choice but to go thru the painful process of switching to Woocommerce.

    Plugin Author Bojan Radonic – WPMU DEV Support

    (@wpmudev-support4)

    Hey there flyfisher842,

    Sorry for the late reply 🙁 We’d like to help you with this so there is absolutely no reason for you to switch to another plugin.

    You should be possible to increase the line height between the categories with some custom CSS. Please try adding the following CSS code in the style.css file of your child theme or if your theme doesn’t have custom CSS tab add it in your site using the following plugin:

    http://wordpress.org/plugins/simple-custom-css

    #mp_category_list li ul li {
    background-position: left center;
    }
    
    #mp_category_list .cat-item {
    line-height: 1.5;
    }

    First part should center the background arrows so they are next to their respective links. As for the line height this is the original line height and to increase it please increase the numeric value (1.5) to what ever suits you the most.

    If this doesn’t work could you please post link to your page where you have this displayed so I can take a look?

    Hope this helps 🙂

    Best regards,
    Bojan

    Thread Starter flyfisher842

    (@flyfisher842)

    Hi Bojan,
    Thanks for the help with the plugin and the code.

    I had identified the selector and knew the CSS code but was unsure where to implement it. I like the idea of keeping the custom CSS off the main Style Sheet. Will give the plugin a try. Fortunately WordPress has a plugin for most everything.

    IMO, the display does not look that bad on my S5 phone.
    http://www.fly-fishing-colorado.com Big G wants all mobile sites to look good on every device without any screen adjustments swiping bigger or smaller stuff. In other words, they want our sites to function mobile like they do on a desktop pc view.

    Tap targets have to be really close together to be difficult to use on most smartphones these days. In 25 sites I looked at last night on my S5, only one was a real problem. And that was a menu sidebar that kept magically appearing and disappearing.

    But we must appease the Big God of the internet so will I will fix this. Big G’s mobile push will pretty much finish any regular HTML websites. HTML5, WordPress and any template site using mobile friendly themes should be able to adapt.

    Thread Starter flyfisher842

    (@flyfisher842)

    I had to add em to the 1.5 to get the spacing but it looks fine now. The next problem is going to be the tag clouds. Those links are in fact too close together for really easy tapping. If you could supply code for adding more padding and line spacing, I would appreciate it.

    Plugin Author Bojan Radonic – WPMU DEV Support

    (@wpmudev-support4)

    Hey again flyfisher842,

    Could you please point to the page where you have tags displayed so I can take a look and provide some custom CSS for this too?

    Best regards,
    Bojan

    Thread Starter flyfisher842

    (@flyfisher842)

    Took me a minute to remember which post this was. Yes.
    http://www.fly-fishing-colorado.com/

    I think some more padding or wider margins will do it. The tag cloud really is too close together when viewed on my S5 phone.

    I tried your other code and after adding em to the line height, worked fine.

    Thanks for the help.

    Plugin Author Bojan Radonic – WPMU DEV Support

    (@wpmudev-support4)

    Hey again flyfisher842,

    Thank you for the link 🙂

    Please try adding the following CSS code:

    #mp_tag_cloud a {
    padding-right: 10px;
    line-height: 1.6;
    }

    This should add right padding to each of the tags and increase the space between the lines. You can play with numeric values if this is not exactly what you’re looking for to achieve the desired look.

    Please let me know if this helps 🙂

    Cheers,
    Bojan

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘google mobile insights’ is closed to new replies.