How can I modify Dawn 3.0 to display 1 row of 3 columns on desktop view?

Store Design
1

I am using Dawn 3.0 and I would like to change my “Collection list” to show 3 columns on desktop and 3 columns on mobile, with only 1 row. I have it working on mobile, but it still shows all of the collections on a desktop instead of just 1 row. My site is www.palmettowoodshop.com and here is my section-collection-list.css:

.collection-list {
  margin-top: 0;
  margin-bottom: 0;
}

.slider-buttons {
  margin-top: -3rem;
}

.collection-list-title {
  margin: 0;
}

@media screen and (max-width: 749px) {
  .collection-list:not(.slider) {
    padding-left: 0;
    padding-right: 0;
  }

  .section-collection-list .page-width {
    padding-left: 0;
    padding-right: 0;
  }

  .section-collection-list .collection-list:not(.slider) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.collection-list__item:only-child {
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 749px) {
  .collection-list .collection-list__item {
    width: 28%;
  }

  .slider.collection-list--1-items {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider.collection-list--1-items,
  .slider.collection-list--2-items,
  .slider.collection-list--3-items,
  .slider.collection-list--4-items {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 750px) {
  .collection-list__item a:hover {
    box-shadow: none;
  }

  .collection-list.grid--3-col-tablet .grid__item {
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .collection-list--4-items .grid__item,
  .collection-list--7-items .grid__item:nth-child(n + 4),
  .collection-list--10-items .grid__item:nth-child(n + 7) {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

@media screen and (max-width: 989px) {
  .collection-list.slider .collection-list__item {
    max-width: 100%;
  }
}

.collection-list-view-all {
  margin-top: 2rem;
}

.card__heading {
  font-size: 1.5rem;
}
2

Hi @PWS1 ,

Please add code:

.section-collection-list .collection-list {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1.5rem;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    padding-top: max(0.5rem,calc(var(--shadow-vertical-offset) * -1 + var(--shadow-blur-radius)));
    padding-bottom: max(0.5rem,calc(var(--shadow-vertical-offset) + var(--shadow-blur-radius)));
}

.section-collection-list .slider-buttons {
	display: flex !important;
}

Hope it helps!

3

Works perfectly! Thanks!