Slideshow not displaying properly

[RonaldS11]

Hi. I just saw my slideshow is not properly displayed on my website. In Edit Theme everything is ok, but in live its not.

This is in Edit Theme:

This is on live server:

[Moeed]

Hey @RonaldS11

Can you share your store URL and Password if enabled?

Best,
Moeed

[topnewyork]

Hi @RonaldS11,

Kindly provide your store URL please and if it is password protected, please share the password as well.
Thanks!

[RonaldS11]

store URL is: https://applemob.ro/

no password needed.

[Moeed]

Hey @RonaldS11

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
@media screen and (min-width: 768px) {
div#Slider-template--18356813463853__1644650669e1107d39 {
    height: 100vh !important;
}
.slideshow__media.banner__media.media img {
    object-fit: fill !important;
}
}
</style>

RESULT:

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[RonaldS11]

Thank you for your solution.
This is not helping me very much because i wanna keep the slideshow like it is, i dont wanna have it on entire screen.
The problem is with the image in slideshow, its kinda zoomed in and thats what i wanna solve.

[RonaldS11]

Here you can see better what i mean.

This is how its in edit theme:

and this is how its on live server:

[tim_1]

You must understand that in your Customizer, the site width is less then when you open your site.

Your slideshow seem to be set to use fixed height – 640px, therefore slide proportions would change when you resize your browser and change its width – the image will be cropped to cover entire slide area.

Usually there are Height setting on the slideshow section and if you need to show your pictures in their entirety you should select “Adapt to image size” (that’s what its called in Dawn, not sure about your theme).

[Steve_TopNewYork]

Hi @RonaldS11,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.slideshow__media.banner__media.media img {
    height: 600px;
}
.slideshow__controls.slider-buttons.no-js-hidden {
    background-color: white;
}
button.focus-inset.slider-button.slider-button--prev {
    color: black;
}
button.focus-inset.slider-button.slider-button--next {
    color: black;
}
.wbslideshow .section-template--18356813463853__1644650669e1107d39-padding .slider-counter__link--active.slider-counter__link--dots .dot {
    background-color: black !important;
}
.wbslideshow .section-template--18356813463853__1644650669e1107d39-padding .slider-counter__link--dots .dot, .wbslideshow .section-template--18356813463853__1644650669e1107d39-padding .slider-counter__link--dots:not(.slider-counter__link--active):hover .dot {
    border: 1px solid black !important;
}