Product block 2 columns mobile

  • Resolved completegraphics

    (@completegraphics)


    4 years, 1 month ago

    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 a11n

    (@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;
	}
}
    Thread Starter completegraphics

    (@completegraphics)

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Product block 2 columns mobile’ is closed to new replies.