Images cut off in mobile

Hi,
Please add this css code to your slider:

.master-slider img {
    max-width: none !important;
}

Regards,
Averta Support

Hi, I added the code provided into my slider:
https://www.madebyera.co/wp-content/uploads/2016/04/slider-capture.jpg

Then I checked mobile, but the images are still cut off:
https://www.madebyera.co/wp-content/uploads/2016/04/IMG_5675.png

https://www.madebyera.co/wp-content/uploads/2016/04/IMG_5674.png

Are there other settings I have to change?

Right now, the slider is 800px wide, 700px height and images are set to fit

Hi,

Please try to delete Your browser cache and try again.

Let us know if You have any further questions.

Regards
Averta

I’ve cleared my browser cache and it is still cut off on mobile.

Can you please provide a different solution, as this doesn’t seem to work.

Thank you

I had the same thing, I had to remove it from the project cause I couldn’t make it display the full image, it just showed a cropped center piece.

Same here. When the slide-show is in horizontal mode, the slides display fine. However if I look at my blog in a vertical mode, the slides become a thin straight line and I can see nothing (only the text).

Hi,

Please update the provided style to the following style:

.master-slider img {
    max-width: none !important;
}
.master-slider .ms-slide-bgcont img {
    margin: 0 !important;
}

Let us know the results.

Regards
Averta

I switched to another slider

wd slider
but it too had the same problem, the display area was right but the background image didn’t scale, so I applied this extra css to my code and now it works fine. Use google chrome and inspect the slider, keep opening the code until you find the element with background image….

.wds_slideshow_image_0{
width:100% !important;
height:100% !important;
background-size:contain !important;
}

Averta: I pasted the code you provided in my slider (Slider settings -> Slider custom style). Nothing changed – still a thin line on the left side of post. I even cleared the cache to make sure the changes applied.

Let me know what the next step should be.

Here is the link. You can test it on a mobile phone. Horizontal view is fine, but not vertical view:
https://fivesecondwindow.com/2016/04/12-must-have-mobile-marketing-tech/

Hi Averta, can you tell me what I should do to resolve this issue?

Thanks.

Hi,

Please try to put the below code in Slider custom styles:

@media screen and (max-width: 750px) {

 .master-slider {
   margin: 0 !important;
 }
 .ms-slide-info.ms-dir-v {
     top: 0;
     position: static;
     width: auto !important;
     padding: 0 20px;
 }

 .ms-info {
        margin-top: 20px;
    }
}

.ms-slide-info {
    overflow: auto;
    height: 100%;
}

Regards
Averta

I put the code mentioned above into the “Slider custom styles” for the slider and in mobile view it still is cut off.

I have also cleared my cache in mobile, using a private tab and the slider is still cut off when remove “Auto-height slider”

https://drive.google.com/file/d/0B7UjSTq47VA6dUtjWTF0WnVmU3JGSERNdUVMaTMzVThqMXo0/view

Hi,

@edna.alfaro

You should use the below code:

.master-slider img {
    max-width: none !important;
}
.master-slider .ms-slide-bgcont img {
    margin: 0 !important;
}

Regards
Averta

Hi Averta,

The code you pasted above works for my slider. Many thanks!

Chris

Hi Averta,

We encountered an issue with the slideshow on mobile device again (vertical mode).

https://fivesecondwindow.com/2016/04/12-must-have-mobile-marketing-tech/

the images seem to all tangled up. Desktop view is fine but not mobile view (vertical). Can you look into it?

Thanks,
Chris