How do I disable full width on Debutify theme?

[fixert]

Hi there,

I want to disable the full width on my website. On full width my banner stretches over the whole screen and I dont want that.

I want it like picture 1 and not 2:

My shop is: fixert.myshopify.com

Please help!

[PageFly-Victor]

Hi @fixert ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

Hope my answer will help you.

Best regards,

Victor | PageFly

[fixert]

Where exactly? I have theme.scss.liquid file, but cant find .

[PageFly-Victor]

You can see my picture below to see more clearly

[fixert]

Not the result I wanted. I want the whole website and content including the header on the same width (desktop size).

[PageFly-Victor]

Sorry for misunderstanding, You can remove my code in previous answer and add this code below:

[fixert]

No, still nothing.

[debutifysupport]

Hey @fixert ,

I will mention a couple of options, please check them out and see if the output is what you desire.

1 - On the slideshow settings, there is an option to change the height of the slideshow for desktop. Your theme is currently set to large, please try changing it to full.

2 - On the theme editor > theme settings > custom style/script > custom style, please add the following CSS and check out the output.

.hero-section .hero{
   min-height: 50rem!important;
}
.bgset {
    background-size: 100%!important;
}

3 - Remove the code from option 2 and add the following one, this one will show the entire image, however, since the width is smaller than the screen, margins will appear on the sides.

.bgset {
    background-size: contain!important;
}

[fixert]

Hi there, still no desired result. What I want is very simple: I want my whole page in desktop size with margins on the side. But everything has to be the same width including the banner.

For example like this website:

[debutifysupport]

Hey @fixert ,

Thanks for sharing the new reference. That wasn’t clear with the first image that you posted.

Please add the following CSS to the theme editor > theme settings > custom style/script > custom style. Make sure to remove the CSS mentioned above or it might conflict and you won’t get the same results.

.wrapper{ 
    max-width: 1000px;
}
.flex-container{
    margin: 0 auto;
    max-width: 1000px;
}
.hero {
    width: 60%;
}
.hero-section .hero {
    min-height: 35rem !important;
    margin: 0 auto!important;
}

This will be the output.