Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • November 8, 2015 at 5:02 am #531964
    janicenisha

    Hi there,

    Am trying to get the avia slider to be responsive. I want the background image to have a shorter height on mobile while it remains fullscreen on desktop. This question has been asked before, so I picked up the code that was recommended :

    @media only screen and (max-width: 767px) {
    ul.avia-slideshow-inner {
    height: 200px !important;
    }}
    .caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title {
    background: rgba(255,255,255,.6);
    display: inline-block;
    margin: 0;
    padding: 20px 35px;}

    It works great, now the image gets resized, but the captions dont follow, and the container is still full screen, there is a white space between the slider image and the bottom arrow.

    My url : http://103.51.41.206/~hwangimc/aham/demo-top5-page/

    How do I get the title and caption to site in my new height? Sitting below the slider works too, but I dont want the white space below it. Appreciate some assistance.

    Thanks!

    November 10, 2015 at 6:04 am #533053
    Rikard

    Hi janicenisha,

    Please try the following in Quick CSS under Enfold–>General Styling to align the caption:

    @media only screen and (max-width: 767px) {
.page-id-146 .slideshow_caption {
height:160% !important;
}
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.