Support » Plugin: WooCommerce Blocks » Product block 2 columns mobile

  • Resolved completegraphics

    (@completegraphics)


    On my home page i have woocommerce product blocks with 4 columns.
    On mobile it becomes a single column and it makes the home page to long.
    I’d like it to be at least 2 columns.

    I tried this CSS code but it the float: left makes the product disappear.

    .wc-block-grid.has-4-columns .wc-block-grid__product {
    	float: left;
    	margin: 0;
    	max-width: 50%;
    	padding: 0;
    }

    Any help is appreciated!
    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Nadir Seghir

    (@assassinateur)

    Hey!

    We don’t really offer CSS support but here you go

    
    @media (max-width: 480px) {
    	.wc-block-grid.has-4-columns .wc-block-grid__products {
    		display: flex;
    	}
    	.wc-block-grid.has-4-columns .wc-block-grid__product {
    		flex: 1 0 50%;
    		max-width: 50%;
    		padding: 0;
    		margin: 0 0 24px;
    	}
    }
    
    completegraphics

    (@completegraphics)

    Thankyou!
    I’ve only just started to learn CSS. helps heaps!

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