Veture - Set collection list to 2 columns on mobile screen size instead of 1

[roy_h45]

Hi, I’ve spent hours trying to change the collection list (featured collection card) on my home page so on smaller media devices is shows 2 cards on the width of the screen instead of just 1 column. On desktop size it has 3 columns and 2 rows my goal is 2 columns and 3 rows on mobile thanks. Any help would be greatly appreciated.

My website - thehomeberry.com, password = thunder / I put some random images on the collection cards for reference.

Reference website - wlane.com.au / When in mobile view or reduced screen size it has 2 collection cards as 2 columns below the hero image. This is the style I’m hoping to achieve.

I have tried to reduce width to 50% of the cards yet it just cuts off the sides of the screen or is static and doesn’t adjust to different screen sizes.

My featured collection card code

/*================ Featured collection card ================*/
.featured-card {
  display: block;
  position: relative;
  height: 100%;
  text-align: center;
  border-color: $color-border;
  border-style: solid;
  border-width: 0 0 1px 1px;
  background-color: $color-content;
  padding: 0 40px;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $color-product-card-overlay;
    opacity: 0;
    transition: $collection-bard-transition;
    z-index: 1;
  }

  &:hover:before {
    opacity: 1;
  }

  .medium-up--one-quarter & {
    @include media-query($medium-up) {
      height: 470px;
    }
  }
  .medium-up--one-third & {
    @include media-query($medium-up) {
      height: 530px;
    }
  }
  .medium-up--one-half & {
    @include media-query($medium-up) {
      height: 650px;
    }
  }

  .no-js & {
    height: 625px;
  }
}

.featured-card--contain {
  @include media-query($small) {
    height: 100% !important;
  }
}

.featured-card--cover {
  height: 380px !important;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  border-width: 0;
}

.featured-card__image-container {
  position: relative;
  width: 100%;
  margin: 0 auto;

  @include media-query($small) {
    .featured-card--contain & {
      height: 100% !important;
      margin-bottom: 40px;
    }
  }
}

.featured-card__blank-image-container {
  position: relative;
  width: 100%;
  margin: 0 auto 40px;

  .featured-card__image {
    position: relative;
    @include media-query($small) {
      max-width: 290px;
    }
  }
}

.featured-card__image {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  .no-js & {
    opacity: 1;
  }
}

.featured-card__header {
  padding: 30px 5% 10px;
  z-index: 1;

  .featured-card--cover & {
    position: relative;
    display: inline-block;
  }

  .featured-card--contain & {
    @include media-query($small) {
      height: 100% !important;
    }
  }
}

.featured-card__header--background {
  background-color: $color-featured-collection-bg;
}

.featured-card__title {
  font-size: em(28);
  margin-bottom: 0;
  color: $color-featured-collection-text;
}

.featured-card__action {
  @include nav-text-style();
  font-size: em(13);
  color: $color-featured-collection-link;

  .featured-card:hover & {
    color: inherit;
  }
}

.section-block {
  position: relative;
  background-color: $color-content;
}

.section-block--padding {
  padding: $gutter-site * 1.5;
}

.section-block__header {
  margin-bottom: $gutter-site * 1.5;
}

.section-block__header--padded {
  padding-top: $gutter-site * 1.5;
}

.section-block__title,
.section-block__subtext {
  margin-bottom: 0;
}

[KetanKumar]

Hello, @roy_h45

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media (max-width:749.5px) {
#collection-list-grid .grid__item {
    width: 50%;
}
}

[roy_h45]

Hi @KetanKumar , I implemented your code and it did work to an extent. The only problem is that the right side of the collection grid gets cut off a little with smaller device screen sizes.

This is a pixel 3 which is larger than most iphones so it is probably worse on there:

it cuts off the electronics header. Any tips to fix this? maybe decrease border margins?

[KetanKumar]

@roy_h45

Yes, please reduce height only mobile.

[roy_h45]

that doesn’t effect width?

[KetanKumar]

@roy_h45

yes, please can you try?

[roy_h45]

I reduced the height but its still cut off.

[KetanKumar]

@roy_h45

if possible to these ways so i will set proper look

I need your store login details. Yes, I know your login details are confidential. For this second option, I have added your store to my Shopify partner account so I will check your code easily and manage what you think about it?

[salah224]

hi where i can apply this code in add section or in the multi column