Jump to content

Split product block into two columns (mobile)

Recommended Posts

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

Link to comment
  • Replies 5
  • Views 397
  • Created
  • Last Reply

Top Posters In This Topic

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

image.png.41486d76af0ca9242f616d3d65ff72cc.png

Thanks for all your help!

Save code & reload your site

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.