Debut theme margins

[AlexandraM93]

Hi guys. On desktop view my website stretches across the page. Making it look very messy. I want to implement margins to the left and right. I was previously using supply theme which had this built in. However in debut theme I have no idea how to change these elements. My mobile view looks great and I don’t want to compromise it. 

would love any advice 

Alex 🙂 

[KetanKumar]

@AlexandraM93 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[AlexandraM93]

Hi 🙂

Thanks for getting back to me so quickly!
My website is byeheat.com.au

Alex

[AlexandraM93]

@KetanKumar 

my URL is byeheat.com.au 

alex 🙂 

[KetanKumar]

@AlexandraM93 

thanks for URL

if possible to provide screenshot for that issue!

[AlexandraM93]

Hi @KetanKumar 

thank you for getting back to me  

I changed from supply theme to debut theme. This is a photo of my old theme desktop (supply theme ).

I was attempting to create borders on the debut desktop Home Screen  currently my screen is stretched across the desktop (as below) 

( debut theme) 

is this possible to change it to include white margins like the supply theme 

Alex 

[KetanKumar]

@AlexandraM93 

yes please confirm

[AlexandraM93]

@KetanKumar 

That’s the appearance I am going for! Just slightly wider (image attached) Is there a specific code I need to apply to create that look?

using this code, will it Alter my other pages / mobile view? 
 

thank you again for responding 

[KetanKumar]

@AlexandraM93 

yes please just reduce height add more height 

[AlexandraM93]

@KetanKumar 

thanks for getting back to me 🙂

the height in the photo you provided looks really good. How do I implement the change?

Alex 

[KetanKumar]

@AlexandraM93 

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

#shopify-section-163515292265ed76ba .slideshow-wrapper {
max-width: 1250 px ;
 margin: 0 px auto;
}
#shopify-section-163515292265ed76ba .slideshow__image {background-size: contain;}

[AlexandraM93]

@KetanKumar 

Although the width is perfect, it only fixed the top banner and not the other elements on the same page. Is there any way to make it all the same? 

Alex 🙂 

[KetanKumar]

@AlexandraM93 

yes that code work only top banner doesn't effect other one 

[AlexandraM93]

@KetanKumar 

thanks for getting back to me. 
Is there anyway to make all elements on the front page that width? 

[KetanKumar]

@AlexandraM93 

try this 

.slideshow-wrapper {
max-width: 1250 px ;
 margin: 0 px auto;
}
 .slideshow__image {background-size: contain;}

[AlexandraM93]

@KetanKumar 

Thanks for getting back to me!

Unfortunately the code is not applying to the page as a whole. The image attach shows the the edited slider. I was hoping to get all other elements in line with the edited banner width. Is this possible for  this layout? 

[KetanKumar]

@AlexandraM93 

try this code

.slideshow-wrapper { max-width: 1200 px ; margin: 0 px auto; }
.image-bar {hidden; max-width: 1200 px ; margin: 0 px auto; }

[AlexandraM93]

@KetanKumar 

Thanks for getting back to me.

When I put the latest code in it reverted the settings back  to the original setting with the images stretched across the screen 

[KetanKumar]

@AlexandraM93 

sorry i can't see code

[AlexandraM93]

@KetanKumar 

sorry for the delayed response.
I have put the code in and there is still no difference. Should I be picking another theme to resolve the issue? 

Alex 🙂 

[KetanKumar]

@AlexandraM93 

yes that code work as well please let me know where is code and give me screenshot again?

[AlexandraM93]

@KetanKumar 

I have attached a photo of the website and the codes. What I am attempting to achieve is making all the banners the same width. I like the width of the top banner. I’m attempting to make the ‘shop now’ and other banners underneath (circled in black) the same as the banner above it 

Alex 

 

 

  

[KetanKumar]

@AlexandraM93 

oh i see please remove last one and add this 

.slideshow-wrapper { max-width: 1200px ; margin: 0px auto; }

[AlexandraM93]

@KetanKumar 

Thanks for getting back to me 🙂  

I created a copy to apply code and the desktop view now looks like this 

[KetanKumar]

@AlexandraM93 

you code wrong put please them.css file so i will update code 

[AlexandraM93]

 

@KetanKumar 

i apologise for the delayed response. 
I have placed code in theme.css and doesn’t  seem to be working. I have attached a print screen of what i have placed in the code so far