New Landing › How can we help? › Atelier › Two column product grid on Mobile menu

Viewing 14 posts - 1 through 14 (of 14 total)
  • Back to forum
    Posted in: Atelier
  • June 29, 2015 at 6:48 am #189504
    aerosum
    Member
    Post count: 35

    Hi,

    The product images on big screen mobiles are looking quite enormous.

    Is there a way I could put a two column product grid on mobile portrait view? It is already a two column layout on landscape mode.

    I think it should be very simple to do. I would really like your help here and as quick as possible.

    Regards
    Sumit

    June 29, 2015 at 9:41 am #189591
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Add this to your custom css:

    @media only screen and (max-width: 479px) { 
.woocommerce .products .product {
  float: left;
  width: 50%;
}
}

    – Kyle

    June 29, 2015 at 9:43 am #189592
    aerosum
    Member
    Post count: 35

    hey thanks,

    Can you please also tell where do I add custom CSS.

    I apologize if I am asking some very easy question 🙁

    June 29, 2015 at 9:45 am #189594
    aerosum
    Member
    Post count: 35

    Found it, thanks..
    And it is looking exactly what I wanted..

    You guys and your theme are simply, Awesome !

    June 29, 2015 at 9:48 am #189598
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    No problem 🙂

    June 29, 2015 at 10:01 am #189602
    aerosum
    Member
    Post count: 35

    Ah.. Sorry to bug again. Adding this code removed the add to cart small button which was coming on the image itself.

    Can you please tell how can I get it back?

    June 29, 2015 at 10:03 am #189604
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    Can you provide your link so I can check?

    – Kyle

    June 29, 2015 at 10:07 am #189606
    aerosum
    Member
    Post count: 35
    This reply has been marked as private.
    June 29, 2015 at 10:07 am #189607
    aerosum
    Member
    Post count: 35

    Sent you the link privately. Open it on a mobile or through browser in Mobile view.

    June 29, 2015 at 10:13 am #189613
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    It’s removed on purpose as it will cover the image if it’s shown, this is bad for user experience

    – Kyle

    July 3, 2015 at 2:31 am #191295
    aerosum
    Member
    Post count: 35

    Hi,

    Sorry I am coming back to the same thread. I need your help here again.

    Since, the add to cart button which comes over the image has been removed I need a button at the bottom of description. I added this by turning it on in the theme options But this button should come only on phone and on the desktop version it should continue to show the add to cart button on image which comes when we hover.

    How can I make it visible only on mobile?

    July 3, 2015 at 7:43 am #191345
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Add this to your custom css:

    @media only screen and (max-width: 767px) { 
.products .product.buy-btn-visible > .product-actions {
  display: none;
}
}

    – Kyle

    July 4, 2015 at 5:59 pm #191701
    aerosum
    Member
    Post count: 35

    Hey,

    thanks for the reply. I tried but it doesn’t seem to work 🙁

    July 6, 2015 at 7:56 am #191815
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Sorry, should be:

    @media only screen and (min-width: 769px) { 
.products .product.buy-btn-visible > .product-actions {
  display: none;
}
}

    – Kyle

  • Back to forum
    Posted in: Atelier
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register