Dawn How to make banner image not take up whole width

[upto]

Can anyone help me?

 

For the last 3 hours I have been searching previous discussions looking for an answer but found nothing, I'm trying to make the image on my banner not take up the entire width of the page, how can i change the width?

 

[Made4uo-Ribe · Accepted solution]

Thank you for the information. Try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

div#Banner-template--20708145889586__image_banner {
    margin: 0 55px;
}

• And Save.

I hope it help. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Made4uo-Ribe]

Hi @upto 

Would you mind to share your Store URL website? with password if its protected. Thanks!

[upto]

https://a6514b.myshopify.com/

[upto]

https://a6514b.myshopify.com/

Hope this works, I'm very new to all of this

[Made4uo-Ribe · Accepted solution]

Thank you for the information. Try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

div#Banner-template--20708145889586__image_banner {
    margin: 0 55px;
}

• And Save.

I hope it help. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[upto]

That worked! 

How do I change the background to be black and not white? editing the theme colors doesn't change it

 

[Made4uo-Ribe · Accepted solution]

Yes we can change that, same Instruction. 

section#shopify-section-template--20708145889586__image_banner {
    background: black;
}

I notice that your slideshow also not on the black background. If you like to change also use this code. 

slideshow-component.slider-mobile-gutter.page-width.mobile-text-below {
    background: black;
}

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[upto]

I really appreciate the help, the top banner came out perfect but the bottom banner still has some white on the edges, do you have any ideas on how to fix it?

 

[Made4uo-Ribe]

Yeah, I know that is why I offer you the 2nd code on my previous comment. All are black and there is white down. 😅

[upto]

I tried the second line of code but nothing changed?

[Made4uo-Ribe]

But on my end its working, i check also in incognito. 

Please refresh your browser or the preview. Thanks!

[upto]

Strange, Thank you for your help