adjusting image banner width

[jahin2]

Help me adjust the image banner width to match the sections below it. on desktop version now the image banner @ top is showing full width while the sections below it have less width. here's the store URL

https://orxydj1le98spcri-90656506170.shopifypreview.com

[asharofficial]

You can used this

Steps to Add Custom CSS in Shopify

1. From your Shopify admin, go to Online Store > Themes.
2. Click Actions for the theme you want to edit, then select Edit code.
3. Find the base.css file under Assets (or whichever CSS file your theme uses).
4. Scroll to the bottom of the file and add the following CSS code:

.banner--adapt {
    width: 1400px;
    margin: auto;
}

[jahin2]

Hi Ashar,

Thanks for the reply. 

added the code @ end of the base.css

still not updated. while viewing on full screen still the banner width is over sized.

[asharofficial]

Let me know the screen size please.

Also just make sure do hard refresh please

[jahin2]

So i adjusted the width to 1200px and it worked. thank you so much for the help.

but after applying it the previous code we did for the mobile version no longer working. its now showing the banner at full 1200px width. can you please help with that?

store link: https://s11iaukvyuisywf1-90656506170.shopifypreview.com

scroll option showing on bottom to view the full banner. see below.

[asharofficial]

@media (min-width: 768px) {
.banner--adapt {
width: 1200px;
margin: auto;
}
}

[jahin2]

Now the banner image is not showing in mobile version.

[jahin2]

So now the issue cleared. I've tried to edit the code and it seems working. below is the code,

/* Apply only on mobile screens */
@media (max-width: 768px) {
.banner__media img {
zoom: 2;
object-fit: cover;
object-position: right;
height: 183px !important;
width: 100% !important;
position: relative !important;
}

.banner__media:before {
padding-bottom: 0 !important;
}
}

@media (min-width: 768px)
{
.banner--adapt {
min-width: 300px;
max-width: 1300px;
margin: auto;
}

[jahin2 · Accepted solution]

now both versions are working fine. Thanks for the help.❤️

[asharofficial]

Thanks

[jahin2]

can you help with another question?

Re: how to change the button color for whole website.
https://community.shopify.com/c/shopify-design/how-to-change-the-button-color-for-whole-website/m-p/...