⚡⚡Flash Sale⚡⚡ Get 20% off any Purchase!!! Limited Time Peroid Only!!! 🔖 Use Coupon Code FLASH at checkout.

Store only shows 1 item per row on mobile

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 15, 2021 at 9:01 am #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.

    January 15, 2021 at 11:27 am #29155
    Hash
    Keymaster

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

    January 17, 2021 at 12:58 am #29183
    puroxialberta
    Participant
    This reply has been marked as private.
    January 18, 2021 at 1:39 pm #29225
    Hash
    Keymaster

    Hi,

    Please check this tutorial https://docs.woocommerce.com/document/change-number-of-products-per-row/

    Thanks

    January 19, 2021 at 9:17 am #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!

    January 19, 2021 at 10:17 pm #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.

    January 21, 2021 at 12:54 pm #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

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