How can I center an image banner with padding on the Dawn theme?

[brvndn]

Hello

I am using the Dawn theme, and looking for help on how to center the image banner with padding on desktop, but keep as full-screen on mobile but sticking to the aspect ratio.

This is what I currently have:

I tried targeting the id (found with inspector) with custom CSS, but no changes were made.

Thank you!

[BrewBrains]

Hi @brvndn , can you share the store URL?

[brvndn]

Hey Sandesh, the url is dwellay.com

[BrewBrains · Accepted solution]

Hi @brvndn ,

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2.  Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width: 600px){
div#Banner-template--16921209897129__image_banner 
.banner__content {
    min-height: 200px;
    width: 100%;
}
}
</style>

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution.

[brvndn]

Hey Sandesh,

This worked to get the image adjusted for mobile, but how would I get it to be centered with padding on the sides on desktop? Similar to this:

[BrewBrains]

Hi @brvndn ,

I tried to look in the issue and found the URL you provided yesterday is not working. Let me know if you need any help setting things up or provide me the working URL in order to look into the issue.

Thanks.

[brvndn]

Hey Brew, the new url is peachybear.com

Thank you for your help.

[websensepro]

Hello @brvndn ,

Go to online store >  Themes > Edit code > Find base.css file 

Add to give code at the bottom of the base.css file 

@media screen and (max-width: 749px)
.banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 18rem;
    width: 100%;
}

Save Changes!