Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 24, 2017 at 4:03 am #843343
    Red Rubber Media

    Hi Guys,..

    I needed to bottom-center the caption on our Avia slider so I used this CSS:
    .slideshow_align_caption {
    top: 250px;
    }

    But now the caption gets pushed to the bottom out of site on mobile devices. Tired styling for mobile parameters but that did not work. What else do I need to add so that it’s responsive?

    August 28, 2017 at 2:05 am #844603
    Red Rubber Media

    Any updates or ideas on this?

    August 28, 2017 at 1:51 pm #844807
    Victoria

    Hi Red Rubber Media,

    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

    
.slideshow_align_caption {
    top: 10px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 28, 2017 at 8:25 pm #845007
    Red Rubber Media

    Your CSS above is what I am using to center the caption (with a value of 180) and it looks fine on a desktop. My issue is that this code pushes the caption so far down on mobile devices,.. it is not seen. I need @media CSS that will cause the caption to appear as it would normally without the adjustment to .slideshow_align_caption. I wrote this code:

    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 736px)
    and (orientation : portrait)
    and (orientation : landscape)
    .responsive .slideshow_align_caption {
    top: 10px;
    }}

    But it is not working.

    Responsive soltion?

    August 28, 2017 at 10:46 pm #845069
    Jordan Shannon

    Hi,

    Try the following in quick css:

    @media only screen and (max-width: 767px)  {
.slideshow_caption .slideshow_inner_caption .slideshow_align_caption{
top: 10px!important;
}

.slideshow_caption .slideshow_inner_caption .slideshow_align_caption .avia-caption-content p{
padding: 0px!important;
}

.slideshow_caption .slideshow_inner_caption .slideshow_align_caption .avia-slideshow-button{
margin-top: 0px!important;
padding: 5px 20px!important;
}}

    Best regards,
    Jordan Shannon

    August 28, 2017 at 11:00 pm #845079
    Red Rubber Media

    Thank you, Jordan! That did it. =)

    August 28, 2017 at 11:34 pm #845094
    Jordan Shannon

    Hi,

    Great! If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Easyslider Caption Disappears on Mobile’ is closed to new replies.