Featured collection card - height - Venture theme

Solved
Highlighted
Tourist
10 0 2

Hi Guys, I am still struggling with the height of the featured collections on the frontpage of www.sunstore.co.za 

 

Whatever I do, it doesn't seem to reduce the height - I would like to get rid especially of the margins on top and below the image. the code looks like below...

 

Any help is appreciated!!!

 

/*================ 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 10px;

  &: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: 430px;
    }
  }
  .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: 10px;
    }
  }
}

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

  .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: 10px 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;
}
1 Like
Highlighted

Success.

Hello ,

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

.featured-card.featured-card--contain {
    height: 295px !important;
}
.featured-card__header {
    height: 110px !important;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
10 0 2

Perfect, thanks a million!!!

0 Likes
Highlighted
Tourist
10 0 2

but now the pics have disappeared on mobile view...

0 Likes

Ok.

Replace that css with this:

@media only screen and(min-width:769px){
.featured-card.featured-card--contain {
    height: 295px !important;
}
.featured-card__header {
    height: 110px !important;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
10 0 2

same problem, images have disappeared + back to original height....

0 Likes
Highlighted
New Member
1 0 0

Works for me :-)

0 Likes