Jump to content

Displaying 2 columns / Related Products / Mobile

Go to solution Solved by tuanphan,

Recommended Posts

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

Hi,

I’m trying to make the ‘related products’ displayed in 2 columns for mobile users.

I’m currently using the code below to display the product page in 2 columns and it works perfectly,  how can I tweak it in order to also make it apply to related products?


Many thanks in advance. 

 

@media only screen and (max-width: 700px) {
  #productList .product {
    clear: none!important;
    margin-bottom: 2em;
    width: 48%;
  }
  #productList .product:nth-of-type(odd) {
    margin-right: 3%;
    clear: left;
  }
  .product img {
    max-width: 100%;
    max-height: 100%;
  }
}

 

Link to comment
  • Replies 13
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
@media only screen and (max-width: 640px) {
  .ProductItem-relatedProducts-item {
    float: left;
    margin-bottom: 2em;
    width: 48%;
  }
  .ProductItem-relatedProducts-item:nth-of-type(odd) {
    margin-right: 3%;
    clear: left;
  }
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 3/7/2020 at 3:24 AM, tuanphan said:

@media only screen and (max-width: 640px) {
  .ProductItem-relatedProducts-item {
    float: left;
    margin-bottom: 2em;
    width: 48%;
  }
  .ProductItem-relatedProducts-item:nth-of-type(odd) {
    margin-right: 3%;
    clear: left;
  }
}

 

Any idea how to add padding down the middle?

 

IMG_7927.PNG

Link to comment
On 3/9/2020 at 5:25 AM, raego said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.list-grid {
    grid-column-gap: 10px;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
On 11/15/2021 at 8:38 AM, raego said:

This code now seems to be showing up weird on product pages. They are still in 2 columns but one column is bigger than the other, any idea how to fix?

1292924033_ScreenShot2021-11-15at12_36_09pm.thumb.png.e6c81552df32d4539d0fa37bd517f6bb.png

raegocreative.com.au/shop

in this code

@media screen and (max-width: 767px) {
    .list-grid {
        grid-template-columns: repeat(2,auto) !important;
        display: grid;
        float: left !important;
    }
}

change 

auto

to

1fr

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/18/2021 at 12:28 PM, tuanphan said:

in this code

@media screen and (max-width: 767px) {
    .list-grid {
        grid-template-columns: repeat(2,auto) !important;
        display: grid;
        float: left !important;
    }
}

change 

auto

to

1fr

 

Thanks - but this makes products go back to 1 column not 2. 

Link to comment
On 11/26/2021 at 4:15 AM, raego said:

Thanks - but this makes products go back to 1 column not 2. 

I think you edit wrong thing, 1fr still make it to 2 columns. 

Add this code

@media screen and (max-width: 767px) {
    .list-grid {
        grid-template-columns: repeat(2,1fr) !important;
        display: grid;
        float: left !important;
    }
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/27/2021 at 7:58 PM, tuanphan said:

I think you edit wrong thing, 1fr still make it to 2 columns. 

Add this code

@media screen and (max-width: 767px) {
    .list-grid {
        grid-template-columns: repeat(2,1fr) !important;
        display: grid;
        float: left !important;
    }
}

 

Thanks, see below - now this code doesn't do anything at all. 

Screen Shot 2021-11-29 at 11.14.39 am.png

Link to comment
On 11/29/2021 at 7:15 AM, raego said:

Thanks, see below - now this code doesn't do anything at all. 

Screen Shot 2021-11-29 at 11.14.39 am.png

Can you send all current code in Custom CSS?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.