🛍 Black Friday Deals 🛍 Get 40% off on all our Premium Themes. ✨Limited to 100 Users Only✨ Coupon Code: BF2021

Home Forums Square Store only shows 1 item per row on mobile

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #29146
    puroxialberta
    Participant

    I’d like to have 2 products per row, or at least have the products take up the full width of the screen (all this is only for mobile of course – PCs are fine). I’ve tried messing with some widths in CSS to no avail.

    #29155
    Hash
    Keymaster

    Can you please show us your website so that we can better understand what you are looking for?

    #29183
    puroxialberta
    Participant
    This reply has been marked as private.
    #29225
    Hash
    Keymaster
    #29243
    puroxialberta
    Participant

    That didn’t work – I’m pretty sure there’s an option in the customize GUI to do that. However, I managed to figure it out. Adding the following to the additional CSS fixed it:

    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product,
    .woocommerce-page[class*=columns-] ul.products li.product,
    .woocommerce[class*=columns-] ul.products li.product {
    	padding: 2px;
    	float: left !important;
    }

    It’d be nice if padding was only applied in between the items, but this will do just fine.
    Thanks!

    #29260
    puroxialberta
    Participant

    Update:
    I changed padding: 2px; to margin: 1.0014% !important; instead so the spacing would work properly across screen sizes. 1.0014% is the highest I could go and still have it work properly across all screen sizes.

    #29306
    Hash
    Keymaster

    Hi,

    The method I suggested was the default WooCommerce method and it should have worked.

    But I am happy that you found another workaround.

    Thanks

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.