2 product rows on mobile - by nic_and_mel

This topic has 6 replies, 4 voices, and was last updated 8 years, 1 month ago ago by Jack Richardson

  • Avatar: nic_and_mel
    nic_and_mel
    Participant
    January 27, 2016 at 23:44

    Hello!

    I am looking for a way to have 2 product rows on mobile portrait.

    I have tried to use the code:

    @media (max-width: 480px) { .products-grid.product-count-4 .product:nth-child(n) {
    width: 50% !important;
    }}

    That I found on another request for this, where it worked. But it does not work for me.

    1, Is it the correct code
    2, where should I place it (I tried the style.css in my child theme, and also in custom css….)

    5 Answers
    Avatar: Robert Hall
    Robert Hall
    Support staff
    January 28, 2016 at 08:54

    Hello,

    Please add this code in Theme Options->Custom CSS->Custom CSS for mobile.

    .product {
        width: 50% !important;
    }

    Regards,
    Robert Hall.

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    January 28, 2016 at 14:13

    Hi!

    Thanks! Worked great!

    Thee more questions:

    1. Is it possible to have the menu in the sidebar on my shop page to be closed initially (now all categories are open, so its a long list. I just want to se the main categories (Jewellery, Bracelets, Necklaces) when user enters the page.

    2. Is it anyway to show the sidebar above the products on mobile?

    3. The mobile menu slides in from the left. I like it better when its from the top down, covering the “page”. Is these a feature available, or am I stuck with the sliding in from the left?

    Best regards
    Daniel

    Avatar: Eva
    Eva Kemp
    Support staff
    January 28, 2016 at 16:55

    Hello,

    1. To close first category, edit wp-content/themes/woopress/js/etheme.js file. Find and comment out line 1808
    $this.find('>li').first().find('.open-this').html(minusIcon).parent().addClass('opened').find('ul.children').show();

    2. Go to Theme Options > Blog Layout > Sidebar position for responsive layout > select “Top”.

    3. Unfortunately there is no such feature. Sorry.

    Regards,
    Eva Kemp.

    Avatar: nic_and_mel
    nic_and_mel
    Participant
    February 16, 2016 at 00:19

    Hi!

    I now have 2 product rows on the shop page/category page, and this is great. However on the single product page on mobile, it is also 50%, so it only uses half the screen in portrait mode…

    Is there anyway to have two products in a row on shop/category-pages, but use the full screen on the single product pages?

    Best regards
    Daniel

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    February 16, 2016 at 09:54

    Hello,

    Please use this css code instead of the previous one in Custom CSS for mobile:

    .products-grid .product {
       width: 50% !important;
    }

    Best regards,
    Jack Richardson.

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

Helpful Topics

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.