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

WagAndPurrs
New Member
6 0 0

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

Replies 2 (2)

PageFly-Henry
Shopify Partner
1149 324 278

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

WagAndPurrs
New Member
6 0 0

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.