Resizing Slideshow in Supply Theme.

travismag
Tourist
5 0 1

Hello,

I am having trouble resizing my slideshow is the Supply theme. I want to make it shorter, and I found a forum suggesting I try this code:

.wrapper.main-content .shopify-section{
max-width: 1200px;
max-height: 400px;
margin: 0 auto;
padding: 0 20px;
}

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

 

It works to resize the slideshow, however the slidehsow will not play and it only displays the first image. Any help is much appreciated!

0 Likes
Katy
Shopify Staff
Shopify Staff
771 43 168

Hey, there!

Katy here from Shopify. Wishing you a warm welcome to our Forum community and thanks for having a browse around. 

While certain code suggestions may indeed work, it is always good to check in, especially if it relates to a Shopify built theme. We can help give suggestions that are up-to-date/ compatible with our own free themes.  Also, I'd love to know your thoughts on why you would like to adjust this exactly? I can then pass this feedback along to our themes team! 

In terms of the steps involved, to add these customizations you will need to go to your: 

Admin > online store > themes > actions > edit code > assets> theme.scss. (I suggest to do so in a duplicate copy of your theme, particularly when adjusting the CSS). 

At the very bottom of this style sheet if you could place the following code:

.flex-viewport {
  max-height: 300px;
}

You can then adjust the number to suit your preferred sizing. 

Do bear in mind however that will affect how the images appear i.e it will likely squash or distort them, depending on how much you reduce this. In this case, you will need to adjust the sizing of the images that you are using for your slider. 

If you prefer not to adjust them, a potential alternative solution would be to alter the position of the image within the visible area. You can do this by adding the following rule and editing the percentage:

.lazyload__image-wrapper img {
    top: -20%;
}

This alters the distance of the image from the top of the visible area, and places the focus on the center of the image.

These changes, unlike the code you have sourced will adjust all images in your slider, not just the first slide. Though you may still need to do some editing to get the look exactly as you would like it.

I am happy to help in any way that I can- do feel free to let me know how things go for you!

Cheers,

Katy

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

0 Likes
Marcus1212
New Member
5 0 0

Can anyone else we are having the same and we cannot seem to resolve . 
our slider images are so big and we have tried unsuccessfully to amend for our site www.outletart.co.uk

the banners on the home page are so big and we are finding any. Any changes or help are always chargeable with spotify. Seriously


@Katy wrote:

Hey, there!

Katy here from Shopify. Wishing you a warm welcome to our Forum community and thanks for having a browse around. 

While certain code suggestions may indeed work, it is always good to check in, especially if it relates to a Shopify built theme. We can help give suggestions that are up-to-date/ compatible with our own free themes.  Also, I'd love to know your thoughts on why you would like to adjust this exactly? I can then pass this feedback along to our themes team! 

In terms of the steps involved, to add these customizations you will need to go to your: 

Admin > online store > themes > actions > edit code > assets> theme.scss. (I suggest to do so in a duplicate copy of your theme, particularly when adjusting the CSS). 

At the very bottom of this style sheet if you could place the following code:

.flex-viewport {
  max-height: 300px;
}

You can then adjust the number to suit your preferred sizing. 

Do bear in mind however that will affect how the images appear i.e it will likely squash or distort them, depending on how much you reduce this. In this case, you will need to adjust the sizing of the images that you are using for your slider. 

If you prefer not to adjust them, a potential alternative solution would be to alter the position of the image within the visible area. You can do this by adding the following rule and editing the percentage:

.lazyload__image-wrapper img {
    top: -20%;
}

This alters the distance of the image from the top of the visible area, and places the focus on the center of the image.

These changes, unlike the code you have sourced will adjust all images in your slider, not just the first slide. Though you may still need to do some editing to get the look exactly as you would like it.

I am happy to help in any way that I can- do feel free to let me know how things go for you!

Cheers,

Katy



fed up with the poor service from spotify. U call up and its yes yes yes and its then nothing. Loosing the will too with poor search engine results using spotify . The greed of spotify is above and beyond for something that should be standard like auto images to fit banners etc.

0 Likes
Kade
Tourist
8 0 2

Good day,

This suggestion to reduce the size of the slideshow is a great help!

However I would also like to be able to display more than one image at a time on the slideshow.

How would I do this?

Kind regards,

Kade

0 Likes
umairamin
Tourist
3 0 0

Hey this solution is not working. I am also working on the same issue. Slide image height is too much, I want to reduce it a bit. please help.

0 Likes