How to make 'image with text overlay' full width banners on debut theme

Store Design
1

Hi all, I’m using Debut theme and I would like my ‘image with overlay’(s) to spread the full width of the page. I have managed to sort this on my ‘about us’ page however I cannot get it to work at full width on the ‘our mission’ or ‘shop by product’ page.

Ideally I would like all of my existing ‘image with overlay’ images to span the full width and all future ones that I add too (although not sure if this is possible)?

Screenshot 2022-02-17 at 17.55.15.png
Screenshot 2022-02-17 at 17.55.15.png2500×1242 541 KB

2

Hi @propervacant

Would you mind sharing your store’s URL so we can provide a solution?

3

Hi @JHKCreate thank you, sorry I forgot to add it, the password is ‘troche’ - https://propervacant.myshopify.com/pages/home-decor

4

@JHKCreate Sorry to pester, is it something you can help with?

5

HI @propervacant ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.template-page .main-content .page-width {
    MAX-WIDTH: 100%;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

6

@AvadaCommerce it worked perfectly, thank you so much you’re a star!

7

Hi, I want to do the oposite, change the banner so I have some space on the sides. Just a litle bit, like the banner should cover 85%. so I figure I can just copy this and change the %. But i can´t seem to find /theme.css in my code? I use Dawn theme. Any ideé what it could be or do you have another solution.

Thanks to anyone if they have an idea.

8

Hi @CStark ,

You can create your own post on the community. Then send me the link to check. Because each theme has its own css and file. so can’t use the same

Thanks you