Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Centering image banner with padding

Solved

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

brvndn
New Member
4 0 0

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:

Screenshot 2024-03-25 at 11.55.02 AM.pngScreenshot 2024-03-25 at 11.56.29 AM.png

 

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


Thank you!

 

 

Accepted Solution (1)
BrewBrains
Shopify Partner
160 26 33

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

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Developer


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

View solution in original post

Replies 7 (7)

BrewBrains
Shopify Partner
160 26 33

Hi @brvndn , can you share the store URL?

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Developer


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

brvndn
New Member
4 0 0

Hey Sandesh, the url is dwellay.com

BrewBrains
Shopify Partner
160 26 33

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

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Developer


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

brvndn
New Member
4 0 0

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

BrewBrains
Shopify Partner
160 26 33

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.

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Developer


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

brvndn
New Member
4 0 0

Hey Brew, the new url is peachybear.com

 

Thank you for your help.

websensepro
Shopify Partner
1288 145 166

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

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial