How can I properly resize hero collection images in Impulse theme?

[Sirrah]

Hi,

I would like to reduce the height of my hero collection images, by 100px (which I know how to do) but when I do so, I want the image to reduce in size to fit within that (i.e. not chop off their heads). How do I do that?

Here’s the code. URL is www.ellennyswim.com/collections/womens.

/================ Module | Collection images at top of templates ================/

$collectionHeroLarge: 420px;

$collectionHeroSmall: 250px;

.collection-hero {
position: relative;
width: 100%;
height: $collectionHeroSmall;
overflow: hidden;
background: $colorLargeImageBg;

@include media-query($medium-up) {
height: $collectionHeroLarge;
}
}

.collection-hero__content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: end;
align-items: flex-end;
padding: ($gutter / 2) 0;
z-index: 1;

@include media-query($medium-up) {
padding: $gutter 0;
}

@IF ($type_header_text_center) {
-ms-flex-align: center;
align-items: center;
}

// Account for overlayed header/toolbar
.overlaid-header & {
padding-top: 70px;

@include media-query($medium-up) {
padding-top: 100px;
}
}

.page-width {
width: 100%;
}

&:before {
@include overlay();
@include heroScrim();
display: block;
}

.section-header {
opacity: 0;
animation: fade-in 0.5s forwards 1s;
}
}

[dmwwebartisan]

@Sirrah

find following code

$collectionHeroLarge: 420px;

Replace to

$collectionHeroLarge: 320px;

Thanks!

[Sirrah]

Hi

Thanks for your reply - I already know to change that section to get it to 320px. What I’m after is how to then contain that image within the new height (so it doesn’t crop off the top of the image).

[dmwwebartisan]

@Sirrah

Please share screenshot !

Thanks!

[Sirrah]

At 420px:

At 320px - I want the image to sit lower so it doesn’t chop off the top:

[dmwwebartisan]

@Sirrah

Please upload high Resolution image

[Sirrah]

It is hi res. I’m really just after help on the positioning of the image, nothing else. Thanks anyway.