Debut theme - slideshow margins & height

Solved
Highlighted
New Member
5 0 1

Hi everyone,

I have tried to make a slideshow on my homepage with debut theme that doesn't take the full width of the page. I know there are already quite a few slideshow questions answered but I can"t find anything that 100% works for this.

I've added this to theme.css.liquid:

div#shopify-section-slideshow {
border: 0px solid black;
margin-left: 10%;
margin-right: 10%;
margin-top: 1%;
margin-bottom: 0%;
padding-bottom: 0px !important;
}

I had some margins on left & right but my image was cropped on both side rather than resized. I added this to control the height then but I have a margin on the bottom I can't get rid off!

.slideshow__image {
height: auto;
}

https://le-comptoir-thes-cafes-cie.myshopify.com/

pass: password

 

Thanks for your help !

Paul

 

 

1 Like
Highlighted
Shopify Partner
1140 241 341

This is an accepted solution.

Hello @Pppppppppaul 

add code assets/theme.scss.liquid bottom of the file

@media only screen and (min-width: 750px){
.slideshow {max-height: 350px !important;}
}


Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Shopify Partner
4617 686 1449

Hello, @Pppppppppaul 

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

div#shopify-section-slideshow {
width: 100%;
    margin-left: 0;
    margin-right: 0;
}
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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted

Hello @Pppppppppaul,

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

.main-content div#shopify-section-slideshow {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 55px!important;
    padding-right: 55px!important;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
5 0 1

Works perfectly! Thanks a lot!

0 Likes