Trying to get my banner image to extend edge to edge

[jasminsharp97]

I'm trying to get the pink banner at the top of this page to extend edge to edge: https://sillygeorge.com/products/pop-on-lashes-single-size

This is the code I was trying but for some reason it's not working. What am I missing?

#shopify-section-template--24793951437172__image_with_text_overlay_JAdraY .section {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100%!important;
max-width: 100%!important;
}

#shopify-section-template--24793951437172__image_with_text_overlay_JAdraY .shopify-section-wrapper.section {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100%!important;
max-width: 3000px!important;
}

[tim · Accepted solution]

Undo your codes and put this into "Custom CSS" setting of this section:

.banner.full-width--true {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  max-width: none;
}

When you use "Custom CSS" Shopify will automatically prepend section id selector (which is needed to override some of the existing rules for width and max-width).  This way it both limits the rule to current section only, but also raises it's priority.

This technique with negative horizontal margin is called "container break"  and work very nicely with vw measurement units to create full-bleed elements.

[jasminsharp97]

This worked perfectly, thank you! Is that a concept I can cross apply to other sections on my website I want to go edge to edge (assuming I figure out the section id for the css) or does that only work on that specific banner block?

[tim]

No need to find section id -- if you use "Custom CSS" the system will add it automatically.

And yes, you can apply it to other elements just need proper selector.