Making Woocommerce mobile site 2 columns for products

  • Resolved behaminhome

    (@behaminhome)


    3 years, 5 months ago

    Hi there,

    I am using Storefront theme and WooCommerce. To display products in two coloumns on mobile I add the following CSS under Appearance > Customize > Additional CSS and click on Publish. Unfortunately it doesn’t work. Can you help me to fix the problem?

    Thank you in advance!

    ul.products li.product {
	width: 46.411765%;
	float: left;
	margin-right: 5.8823529412%;
}

ul.products li.product:nth-of-type( 2n ) {
	margin-right: 0;
}

@media ( min-width: 768px ) {
	ul.products li.product:nth-of-type( 2n ) {
		margin-right: 5.8823529412%;
	}
}

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

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

    (@senff)

    3 years, 5 months ago

    Hey @behaminhome

    When I look at your product pages, it shows in 2 columns for me on mobile. Here’s an example of what I see:


    Image link: https://d.pr/i/XcyPBm

    Did you solve this issue already or am I looking in the wrong direction?

    • This reply was modified 3 years, 5 months ago by Senff - a11n.
    Thread Starter behaminhome

    (@behaminhome)

    3 years, 5 months ago

    Hi! Thank you for your response. Yes, it shows in 2 columns in “store” page but not in home page. It is probably because of the widgets that I use for homepage.

    Actually I added the code on widgets’ own “Additional CSS” but somehow it doesn’t work.

    Senff – a11n

    (@senff)

    3 years, 5 months ago

    Hey @behaminhome

    To do this on the homepage as well, add this code:

    @media screen and (max-width: 799px) {
  .home ul.wc-block-grid__products {
    overflow: hidden;
    display: block;
  }
  .home ul.wc-block-grid__products li.wc-block-grid__product {
	 width: 48%;
	 float: left;
   max-width: 48%;
   margin-left: 4px;
   margin-right: 0;
  }
  
  .home ul.wc-block-grid__products li.wc-block-grid__product:nth-child(2n+1) {
    clear: both;
  }  
}
    Thread Starter behaminhome

    (@behaminhome)

    3 years, 5 months ago

    It works!!! Thank you so much @senff 🙂

    Niall a11n

    (@wpniall)

    3 years ago

    Glad to hear it – thanks for letting us know!

    I’ll mark this thread as resolved now. If you have any further questions, I recommend creating a new thread.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Making Woocommerce mobile site 2 columns for products’ is closed to new replies.