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.

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.

Hello Eric,

I'd be more than happy to do this for you. Feel free to contact me if you still need help.

Thanks,

Dan

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

1 hour ago, Wolfsilon said:

Hello Eric,

I'd be more than happy to do this for you. Feel free to contact me if you still need help.

 

Thanks,

Dan

Hi Dan, 

yes if you could help that would be extremely helpful! Let me know how we should proceed.

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

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

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

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

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

Oh, it worked!!! Thank you

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?

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

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

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

It didn't work, still the pricing is all on the same line

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? 

Also how can I make so the font is 11 on the desktop and 10 on the mobile device?

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?

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

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

Hi! Do you know how to make it so the "sold out" is in red? 

On 6/2/2021 at 2:19 AM, EricGoldberg said:

Hi! Do you know how to make it so the "sold out" is in red? 

You mean this sold out text in product name?

I want to have so that whenever I write the word "sold out" next to a product it shows up in red. Is that possible?

Any update? Can you help?