Hey folks! I hope everyone is well.
I’m updating our theme to the newest version of Warehouse (I’ve got a ton of custom code on the old one so it’s a laborious process) but I’m also refreshing the look of it too.
The slideshow asset built into this theme is a fixed full width with no option to choose the sizing of it, which really goes against my feng shui!
Can anyone assist here please?
For reference, I’d like the slideshow to be the same width as the section below (which I’ve worked out to be 1370px) - but also I’d like it so when viewed on a mobile, the slideshow is full width (there’s an option to upload a mobile friendly image which I’m using).
Here’s the issue I’m running into visually:
To view the theme in question, here’s a link:
https://q8xsra1q8mjv2dco-2131198052.shopifypreview.com
Thanks in advance you lovely lovely people!
-Dave
Hello @UK_Aspire_Vendo ,
Go to online store ---------> themes --------------> actions ----> edit code ---------> theme.css---->
add this code at the very end of the file above tag.
section.section.section--flush {
padding: 0 267px;
}
Please let me know, if the issue is solved.
and please mark the job as completed.
Thanks
Hello @UK_Aspire_Vendo , Please add a div with the class “container” below the div with the class “slideshow__slide-list” in your slide-show element. See the screenshot below.
Add the code below in your CSS of this section file of slideshow or put this into your “theme.css” file.
@media screen and (min-width: 1000px) {
.slideshow__slide {
margin-inline: calc(var(--grid-column-width) + var(--grid-gap));
}
}
See the output below.
If any doubts or queries please reply.
If I managed to help you then, don’t forget to Like it and Mark it as a Solution!
Feel free to reach out if you have any questions or need assistance.
Best Regards,
Darshan.
1 Like
EDIT:
I missed your message about putting the whole slideshow in a DIV container - all I did was amend the CSS as per the 2nd part of your message.
This worked an absolute treat and is EXACTLY what I was looking for!
Thank you so much 
1 Like
Hello @UK_Aspire_Vendo , Please add a new div as per the screenshot below please check.
Please add a div with the class “container” below the div with the class “slideshow__slide-list” in your slide-show element
You have to make changes in your section file of this.
1 Like
I have noticed that despite this working and looking exactly as I’d like it to, there is a split second where the image appears distorted within the boundaries we’ve now set for it (whilst switching between slides) - is there anything we can do to rectify this?
SEE THIS VIDEO
Thank you!
Heyy Mate @UK_Aspire_Vendo , Please put that container below the “slideshow__slide-list” div not above please check it and do the changes only for this div of container structure.
Best Regards,
Darshan.
1 Like
Hello @UK_Aspire_Vendo , I see you put that div with “container” but it goes in the loop. Put it outside the loop below the div with the class “slideshow__slide-list” in your slide-show element.
See the screenshot below.
