Help Please, I need to scale my hero banners with scroll.

[WagAndPurrs]

Hello everyone,

I am generally good with code, however, I need a little help figuring out why my hero banners won't scroll in size and shrink down for the cell phone screen. My home page image does but that's it. I have used percentages and other configurations, but it does not work. I fear I may have set myself up for failure due to my design. But if i can have pages scale properly it'd be good. Also is there a way to have an entire page scale down if needed?

Here is the code is used at the Hero-Collection Banner CSS Entry Point

.collection-hero__image-container {
height: 620px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.collection-hero--with-image .collection-hero__text-wrapper {
display: none;
}

I use it to span the default two column layout and hide the Hero Text for the shopify collection page. I'm sure the mistake is there lol 

Many Thanks

[PageFly-Henry]

Hi @WagAndPurrs 

This is Henry from PageFly - Landing Page Builder App

You need to use %/vw instead of px. so that the banner can be scaled. And note that you need to use the correct class of the banner

Best regards,

Henry | PageFly

[WagAndPurrs]

Hi  Henry,

Thank you for reaching out, however, percentage, vw, px, all seem to end up looking the same. I'm not sure why, I've played with positioning too, and nothing. When viewed on the phone it still looks awful. I just wanted each banner to shrink down on the smaller screen. My home page banner does, perhaps my spanning combined with absolute positioning is messing up the sizing.  my site is wagandpurrs.com. Thanks for your insight. Ill keep trying to figure it out.