The Full width slider module distorts the images in mobile. - Support

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
May 19, 2018 at 6:07 pm #959120

izubeldia
Participant

I’ve detected one error, because full width slider distorts the images in responsive mode:
https://snag.gy/E5omU2.jpg

this is the original image:
https://snag.gy/Bwqps6.jpg

As you can see, the responsive screenshoot has the image lengthened.

May 20, 2018 at 11:00 am #959396
Victoria
Inactive Moderator
Hey izubeldia,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
@media only screen and (max-width: 479px) {
  .avia-slideshow li img {
      width: 150%;
      max-width: 150%;
      margin-left: -200px;
  }
}
```
If you need further assistance please let us know.

Best regards,
Victoria
May 20, 2018 at 4:15 pm #959457

izubeldia
Participant

Hi victoria,

it doesn’t work through your CSS suggestion. look:
https://snag.gy/kPAbDQ.jpg

I don’t mind if the picture will be smaller. But the picture has to adjust to the width.

May 22, 2018 at 6:00 am #960146
Ismael
Moderator
Hi,

This css code stretches the slider container.
```
.home .avia-slideshow li img {
    min-height: 210px;
}
```
I think that was intended for the main slider. Please edit the main slider and provide a custom css attribute to it. Replace the “.avia-slideshow” selector with the custom css class attribute.
```
.home .custom-css-class li img {
    min-height: 210px;
}
```
// https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

Best regards,
Ismael
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.