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

Store Design
,
1

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:

mobile
mobile800×770 179 KB

desktop
desktop2880×1178 288 KB

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

Thank you!

2

Hi @brvndn , can you share the store URL?

3

Hey Sandesh, the url is dwellay.com

4

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!

banner image.png
banner image.png1350×537 196 KB

5

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 on theme.liquid

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

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

6

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:

padding.png
padding.png1565×624 201 KB

7

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.

8

Hey Brew, the new url is peachybear.com

Thank you for your help.