Trying to Make Full Width Slider on Supply Theme - please help!

kacheson
New Member
4 0 0

Hi all, 

I'm very new to Shopify and have just started building my store and I've got stuck on the first thing. I'm moving my site over from Bigcommerce and I like the way it looks now - so I'm trying to keep it as close to that as possible. The first issue I have encountered is that I can't make the slideshow full width whilst keeping all the stuff below it as it currently is. Please excuse the fact that I've barely begun on this site - I've been obsessing over the slideshow haha. 

My current site is: www.zoicpalaeotech.co.uk (on Bigcommerce)

My Shopify site: www.zoic-palaeotech.myshopify.com (password: holdea)

I've searched through the posts on the topic and not really found anything that works for me. I'll paste below the code I have used which has got me the closest, but still not quite there! I have almost no coding experience so could be missing something really obvious. I'd like to stick with Supply if I can due to the fact that I have a large catalogue and it seems to tick most boxes. 

This is what I have used so far (slightly modified from this thread - https://community.shopify.com/c/Shopify-Design/Make-slides-fill-the-entire-width-of-the-page/td-p/34...

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

}

.wrapper.main-content, .shopify-section.slider-section{
max-width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0px 0px;
width: 100%;
overflow: hidden;

}

Problem:

When I click preview it all looks fantastic. Exactly what I want. 

Slider full width.jpg

It then go to insert a photo and it all goes back to the way it was (not a full screen slider). This image isn't optimised for Shopify - but all the others I have tried do the same thing. 

Screenshot 2021-02-10 092339.jpg

So my question is - where am I going wrong? How can I make the slider full screen, whilst maintaining the width of the content below?

Thank you in advance!

 

0 Likes
kacheson
New Member
4 0 0

I've also just discovered it makes my Shopping cart for instance appear full screen width.. clearly not the most elegant solution. Does anyone have other ideas?

0 Likes