Doesnt display correct on mobile

Hey DouPaule,

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: 989px) {
  #full_slider_1, 
  #full_slider_1 .av_slideshow_full.avia-slideshow,
  #full_slider_1  .avia-slideshow-inner,
  #full_slider_1 .avia-slideshow li,
  #full_slider_1 .avia-slideshow li img {
    min-height: 240px;

  }
  #full_slider_1 .avia-slideshow li img {
    width: 140% !important;
    max-width: auto;
  }
   .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
      padding-top: 0px;
  }
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi DouPaule,

Here is what the code does, is it not working like this on your end?

Best regards,
Victoria

Hi DouPaule,

The amount of text is too big for the portrait mode of the mobile screens and the images aspect ratio does not allow for it to have enough height on such window size and so there is no room for text. By design, it can only take two short sentences and no amount of css will fix it.

In this case, it is better to make another slider with images better optimized for small screens and possibly less text and show this slider on mobiles, while hiding the one shown on bigger screens.

Best regards,
Victoria