Split product block into two columns (mobile)

Site URL: https://www.clayform.dk/kunst-karakterer

Hi!

I've been looking for a way to split the products (made in summary blocks) on the mobile view of my product collections (such as https://www.clayform.dk/kunst-karakterer)

I have found different versions of CSS to implement through Design - Custom CSS and Code Injection - Header, but non of them seem to work properly.

If anyone is able to advice that would be nice!

//Lars

On 6/9/2022 at 5:53 PM, latbonzer said:

Site URL: https://www.clayform.dk/kunst-karakterer

Hi!

I've been looking for a way to split the products (made in summary blocks) on the mobile view of my product collections (such as https://www.clayform.dk/kunst-karakterer)

I have found different versions of CSS to implement through Design - Custom CSS and Code Injection - Header, but non of them seem to work properly.

If anyone is able to advice that would be nice!

//Lars

You mean make 2 items/row on mobile?

Yes exactly! @tuanphan

Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1653910993633_1887 .summary-item {
    width: calc(~"50% - 20px") !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
}
}

Thanks a ton, we're so close now @tuanphan!

However, the images are seemingly cropped from the top-left corner, rather than resized.
How do I go about fixing that?



Thanks for all your help!

18 hours ago, latbonzer said:

Thanks a ton, we're so close now @tuanphan!

However, the images are seemingly cropped from the top-left corner, rather than resized.
How do I go about fixing that?



Thanks for all your help!

Save code & reload your site