Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 22, 2019 at 6:21 pm #1057371
    JOT

    Hi support,

    I am working on a new project (see link) where the Easy Slider captions are showing above the images on mobile devices. I would like the caption + background to show – fully visible – below the images on mobile devices – as they do in fact on larger screens.

    I have searched the forum for solutions and see that others have experienced the same. But I have not yet succeeded in fixing the issue by copying the suggested CSS-fixes from other topics.

    Hope for your help :-)

    January 23, 2019 at 5:00 pm #1057812
    Victoria

    Hey JOT,

    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: 767px) {
  .caption_bottom .slideshow_caption .slideshow_inner_caption {
      bottom: 55px;
      min-height: 50px;
      padding: 0;
  }
  .avia-caption-content p  {
    background: #202020 !important;
    padding: 5px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    January 23, 2019 at 5:13 pm #1057821
    JOT

    Thank you so much, Victoria!

    It is almost done – but the point is, that I want the caption shown below the image.
    Your fix seem to place the caption+background on top of image, instead of below image.

    I hope for your input to fix the last small detail :-)

    Kind regards,
    JOT

    January 24, 2019 at 6:17 pm #1058267
    Victoria

    Hi JOT,

    Best regards,
    Victoria

    January 24, 2019 at 6:51 pm #1058300
    JOT

    Hi Victoria,

    That is exactly the problem – the caption hides under the next elements instead of staying visible below the slider image.
    But for sure there must be a solution to this?

    Kind regards,
    JOT

    January 24, 2019 at 7:50 pm #1058323
    JOT

    Hi again Victoria,
    I came up with this solution and it seems to work.
    Thank you so much for leading me in the right direction!
    Kind regards,
    JOT

    @media only screen and (max-width: 768px) {
    .caption_bottom .slideshow_caption .slideshow_inner_caption {
    bottom: -145px;
    min-height: 140px;
    padding: 0;
    }
    .avia-caption-content p {
    background: #202020 !important;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 5px;
    }
    .avia-slide-wrap {
    margin-bottom: 110px;
    }
    #top .avia-slideshow-dots {
    display: none;
    }
    }

    January 25, 2019 at 2:13 pm #1058735
    Rikard

    Hi,

    Great, glad you found a solution and thanks for sharing. Much appreciated :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    January 25, 2019 at 2:36 pm #1058753
    JOT

    Hi Rikard,

    The issue has been solved and you can close this string.
    Have a nice day!

    Kind regards,
    JOT

    January 29, 2019 at 10:52 pm #1060204
    Basilis

    Hi,

    Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Basilis

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Easy Slider mobile devices – place caption below images’ is closed to new replies.