How to make full width hero banner on supply theme?

Store Design
1

Hello,

I want to remove margins from my hero. I would like to have a full width banner in my home page.

If someone can help me with CSS to fix that.

Thanks you in advance :wink:

2

Hii, @Mvrtgl
Provide me your store URL so,
I can solve it for you.
Thank You.

1 Like
3

Hey,

Thanks for your help

https://boutique-test-martin-2.myshopify.com/

4

HIi @Mvrtgl
Paste this code in top of theme.scss file.

main.wrapper.main-content {
    min-width: 1345px !important;
}

Thank You.

5

Ough it don’t really works :sweat_smile:

Check the site now

6

Is it in theme.scss.liquid ? :blush:

7

@Mvrtgl
Yes!

8

Thanks :blush:

But can you check on the site, there is a problem :confused:

9

@Mvrtgl
What is the problem??

10

IMG_20210810_135044.jpg
IMG_20210810_135044.jpg1080×1509 77.2 KB

11

Hero isnt centred and isnt full width :confused:

12

@Mvrtgl
provide me a screenshot what you want
Thank you.

13

Snapchat-365063388.jpg
Snapchat-365063388.jpg1080×2268 136 KB

14

@Mvrtgl
Mark the image which you want to edit.
Thank You.

15

The hero should take all width as you Can see

IMG_20210810_143438.jpg
IMG_20210810_143438.jpg1080×2268 138 KB

16

@Mvrtgl
I will fix it.

1 Like
17

Thanks a lot :handshake: :handshake:

18

Have you found something ? :blush:

19

I found the code, thanks for your help.

.template-index    main.wrapper { 
        max-width:100%;
        padding:0;
        }
.template-index    main.wrapper>* {
        max-width: 1060px;
        margin-left: auto;
        margin-right: auto;
        padding-left:30px;
        padding-right:30px;
    }
#shopify-section-slideshow {
        max-width: 100%;
        width: 100%;
        padding:0;
    }
.flexslider .slides img {
    width:100%;
}
1 Like
20

oh sorry but the code I found don’t really works, it only removes the top margin but not the left and the right one