Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 3, 2014 at 3:11 am #329417
    Micheal0424

    Full Width Easy Slider – Mobile Device Appearance

    When the Full Width Easy Slider is being viewed on a mobile device it doesn’t look good. The caption doesn’t fit properly.

    I am not sure if it would look good if it could fit, would be too small to read.

    What are my options?

    1) Remove the slider when being viewed on mobile devices if that is possible.

    2) Have an alternate slider that only shows up on mobile device. (I think I prefer this idea)

    Any help is greatly appreciated.

    Thanks.

    http://maximwebsites.com/

    October 3, 2014 at 8:06 am #329517
    Arvish

    Hi Micheal0424!

    Have you tried using CSS media queries to change the CSS for the each slide at different screen resolution.

    The custom.css file inside the css folder of the theme already has has a basic structure to help you out.

    You can add your css for mobile devices where it says /* Add your Mobile Styles here */

    This way you can for example add the following to modify the caption font-size for one of the slides.

    @media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
.slide-2 .slideshow_caption{
bottom:50px;
right:50px;
}

.slide-2 .avia-caption-title{
    font-size: 12px;

}

.slide-2 .avia-caption-content{
    font-size: 12px;

}
}

    If you need a more in-depth explanation on media queries, have a look at these articles:

    October 3, 2014 at 5:12 pm #329799
    Micheal0424

    My issue is the caption doesn’t fit properly.

    The picture is fine, it is just the caption is too large to fit.

    Any suggestions?

    Thanks.

    October 4, 2014 at 4:36 am #330080
    Josue

    Hi!

    2) Have an alternate slider that only shows up on mobile device. (I think I prefer this idea)

    Set custom classes to each slider (mobile_slider and desktop_slider), then add this to your custom CSS:

    .mobile_slider{ display: none; }
@media only screen and (max-width: 767px) {
.mobile_slider{ display: block; }
.desktop_slider{ display: none; }
}

    Best regards,
    Josue

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