2 product collum on mobile

  • Resolved rs81

    (@rs81)


    5 years, 10 months ago

    HI

    i want to have two rows of product on my site too, when viewing on a mobile.

    i tried these two, but there need to be some space between the products, there now close to eachother.

    @media screen and (max-width: 750px){
    .woocommerce .products .product {
    max-width: 50% !important;
    }}

    and this one i tried

    @media screen and (max-width: 750px){
    .woocommerce .products .product {
    max-width: 50% !important;
    clear: none;
    }
    .woocommerce ul.products li.product .title {
    min-height: 60px;
    }
    .woocommerce ul.products li.product .inner {
    min-height: 40px;
    }
    .woocommerce ul.products li.product .btn-wrap {
    min-height: 55px;
    }}

    can you please fix the layaout, so the product have some space next to eachother and the product are more left and right.

    my site https://surtoys.com/

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Senff – a11n

    (@senff)

    5 years, 10 months ago

    Hi @rs81

    Instead of the code above, try adding this:

    @media screen and (max-width: 480px){
  .woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
		width: 48% !important;
		margin-left: 4% !important;
  }
	
  .woocommerce ul.products li.product:nth-of-type(2n+1),
	.woocommerce-page ul.products li.product:nth-of-type(2n+1) {
		clear: both;
		margin-left: 0 !important;
	}
}

    As you can see, I had to use some !important tags in there, in order to override other styles that had !important in it already. In general, the use of this tag is discouraged.

    Thread Starter rs81

    (@rs81)

    5 years, 10 months ago

    Thank you so much.
    it was so frustratng to adjust this.

    This is just how i want it to be.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘2 product collum on mobile’ is closed to new replies.