How to increase the columns in the Collection List for Tablet View - Toyo Theme

[snufflebum]

Hi,

I am using the collection list section from the Toyo theme and this is what it looks like in the Desktop view:

This is what it loos like for the mobile view:

Number of columns for the mobile view is set to 2 (which is the max available) and I am using this css:

@media only screen and (max-width: 500px) {
  .collection-list {
    padding-top: 21px;
  }
}
@media only screen {
  .slider-buttons {
    display: none !important;
  }
  .button {
    display: none !important;
  }
  .card__heading {
    display: none !important;
  }
}

This is what it looks like for the tablet view:

Now as you can see, the tablet view is replicating the mobile view and its not looking good. I need to increase the number of columns visible for the tablet view and they should also dynamically adapt to the screen size, because they are appearing too big. Please help.

My store url: snufflebum.com

Pw: bohtro

[Sweans]

Hi @snufflebum ,

Please add the following CSS code to adjust the size of the collection items in the table view to display 5 items.

To change the number of items shown, modify the width percentage from 24% to the desired size:

@media screen and (min-width: 750px) and (max-width: 989px) {
.slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
.slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
width: calc(24% - var(--grid-desktop-horizontal-spacing) - 3rem) !important;
}
}

Result:

Please see the attached screenshot for reference.

If you need further assistance, feel free to reach out.

I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans

[ZestardTech]

Hi @snufflebum

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
.grid--peek .grid__item {
min-width: auto!important;
width: calc(25% - var(--grid-mobile-horizontal-spacing)* 3 / 4)!important;
}
}

[snufflebum]

This worked. Thank you. I have also added top padding to the list:

@media screen and (min-width: 750px) and (max-width: 989px) {
.slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
.slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
width: calc(24% - var(--grid-desktop-horizontal-spacing) - 3rem) !important;
}
  .collection-list {
    padding-top: 21px;
  }
}

Is this the correct way of doing it?

[GTLOfficial]

Hello @snufflebum

Go to online store ---------> themes --------------> actions ------> edit code------->base.css -----> line number 1582
search this code

@media screen and (min-width: 750px) and (max-width: 989px) {
.slider--tablet.grid--peek.grid--2-col-tablet .grid__item, .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
}
}

and replace with this code

@media screen and (min-width: 750px) and (max-width: 989px) {
.slider--tablet.grid--peek.grid--2-col-tablet .grid__item, .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
width: calc(20% - var(--grid-desktop-horizontal-spacing) - 3rem);
}
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[snufflebum]

Thanks for this. I have implemented this in addition to the solution offered by Swean. My mobile UI is looking even better now. I have changed the 25% calc to 30%.

[Sweans]

Yes you can do this way also.