What can be done to add margins to the Debut theme on Shopify?

AlexandraM93
Excursionist
31 0 13

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 🙂 

Replies 25 (25)

KetanKumar
Shopify Partner
36839 3635 11972

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AlexandraM93
Excursionist
31 0 13
Hi 🙂

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

Alex


AlexandraM93
Excursionist
31 0 13

@KetanKumar 

my URL is byeheat.com.au 

 

alex 🙂 

KetanKumar
Shopify Partner
36839 3635 11972

@AlexandraM93 

thanks for URL

if possible to provide screenshot for that issue!

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AlexandraM93
Excursionist
31 0 13

 

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 ).

666723D0-142E-4461-A790-94A4668BBA52.jpeg

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

E01438F8-5D36-44E6-B694-6CE1E5D14B2F.jpeg

( debut theme) 


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

 

Alex 

KetanKumar
Shopify Partner
36839 3635 11972

@AlexandraM93 

yes please confirm

KetanKumar_0-1635261596442.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AlexandraM93
Excursionist
31 0 13

@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 

7066496C-94AA-47C3-96BE-3EC40DB3F214.jpeg

KetanKumar
Shopify Partner
36839 3635 11972

@AlexandraM93 

yes please just reduce height add more height 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AlexandraM93
Excursionist
31 0 13

@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
Shopify Partner
36839 3635 11972

@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;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AlexandraM93
Excursionist
31 0 13

@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
Shopify Partner
36839 3635 11972

@AlexandraM93 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AlexandraM93
Excursionist
31 0 13

@KetanKumar 

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

KetanKumar
Shopify Partner
36839 3635 11972

@AlexandraM93 

try this 

.slideshow-wrapper {
max-width: 1250 px ;
 margin: 0 px auto;
}
 .slideshow__image {background-size: contain;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AlexandraM93
Excursionist
31 0 13

@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? 

3D435915-3993-4252-AFB0-CD74859EE01A.jpeg

KetanKumar
Shopify Partner
36839 3635 11972

@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; }
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AlexandraM93
Excursionist
31 0 13

@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
Shopify Partner
36839 3635 11972

@AlexandraM93 

sorry i can't see code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AlexandraM93
Excursionist
31 0 13

@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
Shopify Partner
36839 3635 11972

@AlexandraM93 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AlexandraM93
Excursionist
31 0 13

@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 

92274EA6-0AB8-4AAE-8E3E-06F3ED8879FD.jpeg

DF86BB02-3509-412B-87B8-BF7E18005E7B.jpeg

  

KetanKumar
Shopify Partner
36839 3635 11972

@AlexandraM93 

oh i see please remove last one and add this 

.slideshow-wrapper { max-width: 1200px ; margin: 0px auto; }
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AlexandraM93
Excursionist
31 0 13

@KetanKumar 

 

Thanks for getting back to me 🙂  

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

D12C2DD6-D52B-4278-9834-F97349A3958A.png

KetanKumar
Shopify Partner
36839 3635 11972

@AlexandraM93 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AlexandraM93
Excursionist
31 0 13

DB7BF717-E664-4579-BB1B-ED9BEEC2F714.jpeg

@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