Dawn 2.0 Image banner width

Solved
BBStorm
Excursionist
24 0 8

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.

BBStorm_0-1636912031743.png

Thanks for any help you might be able to provide!

Accepted Solution (1)

Accepted Solutions
PaulNewton
Shopify Partner
3503 234 688

This is an 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... 

 

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post

Replies 4 (4)
KetanKumar
Shopify Partner
25061 2508 9071

@BBStorm 

yes please confirm this look

KetanKumar_0-1636920305418.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PaulNewton
Shopify Partner
3503 234 688

This is an 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... 

 

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post

BBStorm
Excursionist
24 0 8

Yes, that look would be perfect.

BBStorm
Excursionist
24 0 8

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