How can I adjust banner image size for perfect page margins?

[ParlourC]

Hi all,

Im looking to make my banner image flush with the rest of my content on my home page, ive attached an image to show how I want the margins to be.

I have tried custom css padding but it seems to vary between screens

The website is: parlourcollection.com

Any help is appreciated.

Thanks.

[dbuglab]

Hi @ParlourC

You added the image with text, you have to add text over the image using schema then you can add the overlay for text.

That will be good for the banner.

Please let me know if need any help from my end.

[David_SHT]

Hi @ParlourC ,

This is David at SalesHunterThemes.

Thank you for your question.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → base.css file.

Add this following code at the bottom of page.

@media screen and (min-width: 750px){
 #shopify-section-template--20328336458001__3539c2e4-9032-4f3b-9cdb-92d2db95756b {
   padding: 0 5rem !important;
 }
}

#shopify-section-template--20328336458001__3539c2e4-9032-4f3b-9cdb-92d2db95756b {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

#Banner-template--20328336458001__3539c2e4-9032-4f3b-9cdb-92d2db95756b {
 margin: 0 15px;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

[ZestardTech]

Hello @ParlourC

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.banner {
    margin: 0;
    padding: 0;
  }
  .banner__media {
    margin: 0;
    padding: 0;
    background: #ebdfc6!important;
  }
  .banner__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

[ParlourC]

Hi thank you for the reply. I tried the code but there were no changes, could this be due to other custom code previously added?

[ParlourC]

Hi thank you for the reply. I tried the code but there were no changes, could this be due to other custom code previously added?

[ZestardTech]

Hello @ParlourC

Working fine.