How can I adjust the image banner width in Dawn 2.0?

[BBStorm]

Hello,

My site is Beautiful by Storm; I would like to make my 'Image banner' not completely go from side to side. Instead, I want a consistent margin down my website. Here is a photo, so you understand what I'm asking for it to look like.

Thanks for any help you might be able to provide!

[KetanKumar]

@BBStorm 

yes please confirm this look

[BBStorm]

Yes, that look would be perfect.

[PaulNewton · Accepted solution]

Add the following as a custom liquid or custom html section/block to add bleed to all image banner sections for desktop users

<style type="text/css">
    @media screen and (min-width: 990px) {
        section[id$="__image_banner"]  {
            max-width: var(--page-width);
            padding: 0 5rem;
            text-align: center;
            margin: 0 auto;
        }
    }
</style>

https://help.shopify.com/en/manual/online-store/themes/os20/themes-by-shopify/dawn/sections#custom-l... 

[BBStorm]

Thanks, this worked perfect for me. I placed it in the bottom of 'image-banner.liquid'.

[colorkey]

If I need to adjust the width of another banner, but I don't want the top banner to be affected, what do I want to do

[RicquelS]

I've tried placing this at the very bottom of 'image-banner.liquid' but it's not working for me.  I previously changed some other code to allow the entire banner to be clickable, and I'm wondering if that's messing it up somehow? I followed this tutorial for that Dawn theme: how to make the image banner clickable (ezfycode.com)

Is it still possible for me to make the banner width smaller? I'm wanting it to stay at the same ratio, just not go all the way across the page because it looks absolutely HUGE on a desktop. 

Thanks! 

[JF5]

Hi! This worked great, but it's working only on one image banner, others are full width. Do you have any suggestions on how it can apply to all image banners?  Thanks!

[dicewar]

I have this same issue. It worked perfectly on the top image banner, but not the image banners below.