Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How can I change the size and layout of my Store Products on Mobile/Tablet only?


scholarsayze

Question

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/store

Hello, is it possible to change the overall size/layout of my store products on Mobile/Tablet only without cropping?

Currently my products view is as attached in current view image, but I would like to change to either 'new view' or 'new view 2' as attached.

Please help!

Page = https://bluebird-porcupine-yzdg.squarespace.com/store

Pword = bluebird

Many thanks,

Best,

Faiz

 

current-view.jpg

new-view.jpg

new-view-2.jpg

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

2 answers to this question

Recommended Posts

  • 0

You mean change to 2 items/row on tablet/mobile?

Add to Design > Custom CSS

/* Product 2 columns mobile tablet */
@media screen and (max-width:991px) {
	.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}

 

Link to post
  • 0

That's AWESOME!! So cool thank you!

I tried this and looks great. However, I might use this layout once I get more products made.

Could you help me please by making the products single row but smaller showcase like the second image above?

Thank you!

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...