Jump to content

Custom coding - Need help with making 3 columns appear on mobile mode instead of 1. If someone could help it would be much appreciated! Willing to commission this.

Recommended Posts

  • Replies 22
  • Views 712
  • Created
  • Last Reply
1 hour ago, EricGoldberg said:

Site URL: https://www.thelabel318.com

Need help with making 3 columns appear on mobile mode instead of 1. If someone could help it would be much appreciated! Willing to commission this.

Add this to design->custom css

@media screen and (max-width: 768px) {
    .products.collection-content-wrapper .list-grid {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      grid-column-gap: 4vw;
      grid-row-gap: 2vw;
      padding: 0;
  }
}

image.png.43b0219d295b34e4caa8ca9697bc88fb.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
36 minutes ago, bangank36 said:

Add this to design->custom css


@media screen and (max-width: 768px) {
    .products.collection-content-wrapper .list-grid {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      grid-column-gap: 4vw;
      grid-row-gap: 2vw;
      padding: 0;
  }
}

image.png.43b0219d295b34e4caa8ca9697bc88fb.png

I tried doing this, it didn't work for the mobile preview. I want to be 3 columns for mobile preview. 

Link to comment
1 hour ago, EricGoldberg said:

I tried doing this, it didn't work for the mobile preview. I want to be 3 columns for mobile preview. 

Here how it look on mobile view, did you add it to design - custom css

image.png.db70bf5bc576186078dab71033e80a9a.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
34 minutes ago, EricGoldberg said:

Yes! Could it be my browser? I am on safari

I did not see it in ykur custom css, could you take a screenshot where you add it

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
20 hours ago, EricGoldberg said:

Hi - are you able to help to make the font size smaller? I want the captions to all be on the same line. I can't make the font smaller than 12px. Can you help?

Add to Design > Custom CSS

/* product title font */
.products.collection-content-wrapper .grid-main-meta .grid-title {
    font-size: 12px;
}

 

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
On 5/14/2021 at 10:01 PM, EricGoldberg said:

Thank you! And also to make display pricing so it is all on the same line? Is that possible?

Add to Design > Custom CSS

/* title pricing same line */
@media screen and (min-width:768px) {
.grid-main-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.grid-prices {
    margin-top: 0 !important;
    margin-left: 10px;
}}

 

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
On 5/16/2021 at 10:03 PM, EricGoldberg said:

Oh I see. I wanted it to be on 2 sperate lines. Product name and price. I wanted all the prices to be on the same line. Do you know what I mean? 

You mean title have different height, make price not align.

You want all price align in a same line?

 

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
  • 2 weeks later...
On 5/27/2021 at 3:25 AM, EricGoldberg said:

Yes! All prices on the same line and inline with one another. Product name on a different line. Is that possible?

Add to Design > Custom CSS

/* Mobile-Align product price */
@media screen and (max-width:640px) {
.products.collection-content-wrapper .grid-main-meta .grid-title {
    min-height: 30px;
}
}

 

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
  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.