I’m looking for a way to “shrink” the slideshow section in the theme Debut. I’ve seen many questions of that kind already, and many solutions as well, but sadly none of them worked for me so far. I would love the section to not be the full width of the screen (this is mostly an issue for desktops, because the pictures will be shown so large that the quality lacks). I’d love for there to be blank/white spaces on the left and right side of the images, but in a way they are resized (not just cropped on both sides) and shown in the same ratio as now in the middle of the screen (I think the words “margin” or “padding” belong somewhere here … I don’t know what exactly they mean or what’s the difference, English is not my first language.
Try the following code in your theme’s CSS file and let me know if it accomplishes what you want. The 1090 sets it to the same visual width as the content below on desktop, but you can change that value if you want it wider or narrower.
So, there is a white space left and right of the picture now, but what it did is to crop the picture on both sides (as you will see if you compare it to the screenshot in my original post). It therefore also changed the image’s ratio.
I would like for the image ratio to stay the same, and therefore the image height adjust accordingly to the width. If that’s somehow possible?
But thank you a lot already! Perhaps you can figure out a way to fix the last small issue.
You’re welcome but apologies I wasn’t able to completely solve the problem. Question - do you have a way to edit the height of the slideshow in your theme customizer? I see all your images are the same size. If we can set the slideshow to the same size as the images then this will be a simple fix in CSS. Otherwise it may involve some extra steps. I will see if I can figure anything else out.
There is a way to do that, yes! I can set the image height to “Small” (before it was “Medium”) (on our interface the option is called “Diahöhe”, and the different settings “Klein”, “Mittel”, “Groß”, and “An erstes Bild anpassen”, since it’s in German).
That basically solves it for us, because it looks pretty much as we hoped it would (see below):
So, you don’t even really have to do anything else (unless you want to figure out a way to limit the width and keep the ratio through added code - but for us it’s not totally necessary).
Thank you a lot for your help! I will mark your message as a solution. Perhaps this helps other as well.
I’m glad it helped. If you want to keep the full image without cropping, you can also add the following code to your CSS:
.slideshow__image {
background-size: contain;
}
In original code the background-size was “cover” which fills the space with the image while keeping the original aspect ratio (hence the cropping). “Contain” sets the image as large as possible within its container without cropping or stretching.
However, it will lead to bars of blank space on either the top/bottom or the left/right as seen below (I used your screenshot as the example image):
So if your images weren’t the same size as the slideshow element you would need to either resize them or do some additional code changes to resize the slideshow itself. Cheers!
Thanks again. Yes, it creates these grey bars around the image, so I think we will stick to the first option for now. But it’s good to know, thank you!
