Help with Fixing Mobile Slideshow Images and Removing Dead Space

[shayvidas]

i'm trying to fit my slideshow pictures to mobile
as they are currently cut on mobile > 

i put this code > 

@media (max-width: 768px) {
    .shopify-section.section, 
    .shopify-section.section > div {
        min-height: 0 !important; /* Remove forced height */
        height: auto !important; /* Allow height to adapt to content */
        padding: 0 !important; /* Eliminate padding */
        margin: 0 !important; /* Eliminate margins */
        overflow: hidden !important; /* Prevent hidden elements from spilling */
    }

    .shopify-section.section img {
        width: 100% !important; /* Ensure the image spans the full container width */
        height: auto !important; /* Maintain aspect ratio */
        object-fit: cover !important; /* Prevent distortion */
        display: block; /* Eliminate extra spacing from inline elements */
    }
}

into the class "base.css"

and the picture is fine

but then there is a lot of dead space below the picture >

the best would obviously be the put another picture for mobile
but dawn doesn't allow that without major css changes
so just to make the current pictures now being cut on mobile would work 

but is there a way to remove that dead space there ?
my website is; 

https://vidaswatches.com/

thanks friend

[DaisyVo]

Hi @shayvidas 

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (max-width: 750px){
.slideshow__media.banner__media.media > img {
    width: 100% !important;
    height: auto !important;
}
.slideshow__media.banner__media.media {height: 140px !important;}
.slideshow__text-wrapper.banner__content {
    min-height: 140px !important;
}
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.