adjusting image banner width

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

https://orxydj1le98spcri-90656506170.shopifypreview.com

You can used this

Steps to Add Custom CSS in Shopify1. From your Shopify admin, go to Online Store > Themes.

  1. Click Actions for the theme you want to edit, then select Edit code.
  2. Find the base.css file under Assets (or whichever CSS file your theme uses).
  3. Scroll to the bottom of the file and add the following CSS code:
.banner--adapt {
    width: 1400px;
    margin: auto;
}

1 Like

Hi Ashar,

Thanks for the reply.

added the code [email removed] end of the base.css

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

Let me know the screen size please.

Also just make sure do hard refresh please

1 Like

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.

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

1 Like

Now the banner image is not showing in mobile version.

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;
}

now both versions are working fine. Thanks for the help. :heart:

Thanks

1 Like

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/2882473#M755769