Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 18, 2016 at 1:31 pm #585385
    boemedia

    Hi, I’ve adjusted the look and feel of the texts on the full width easy slider, but unfortunately, they don’t scale for mobile devices. The slider itself, however, does. I’ve done the adjustments in my child theme’s css stylesheet, as well as some bit in the quick css section of the theme. I used em-sizes, but that doesn’t help.

    Link to the site is included in private content.

    Thanks

    Kind regards,
    Monique

    February 18, 2016 at 4:07 pm #585463
    Andy

    Hi boemedia!

    are you talking about caption title of your slider? if yes use this code:

    @media only screen and (max-width: 736px) {
h2.avia-caption-title {
font-size: 15px !important;
}}

    and adjust font-size as needed.

    Cheers!
    Andy

    February 18, 2016 at 5:36 pm #585524
    boemedia

    Ok thanks, I used a different code:

    .slideshow_caption h2 {
    font-size: 4em!important;
    font-weight: lighter!important;
    }

    but it seems to work. However, the button disappears on smaller screens… do you have a solution for that as well?

    February 19, 2016 at 12:57 pm #585995
    Andy

    Hi!

    slider is too small for mobile, try to increase with this code:

    div#full_slider_1 {
height: 200px;
}
ul.avia-slideshow-inner {
height: 200px !important;
}
.avia-slide-wrap {
height: 200px:
}

    Best regards,
    Andy

    February 19, 2016 at 1:08 pm #586012
    boemedia

    Now the button is visible in a white area below the image, which doesn’t scale…

    February 19, 2016 at 1:31 pm #586032
    Andy

    Hey!

    sorry I had a typo in my last code. Replace it with this one: 

    div#full_slider_1 {
height: 200px;
}
ul.avia-slideshow-inner {
height: 200px !important;
}
.avia-slide-wrap {
height: 200px;
}

    Regards,
    Andy

    February 19, 2016 at 1:54 pm #586047
    boemedia

    The background is now blue-ish (my overlay colour I guess), but the image is still not scaling…

    February 19, 2016 at 3:05 pm #586084
    Andy

    Hey!

    well your images are not ideal for mobile, because they are very wide. However, you can stretch them with this code:

    @media only screen and (max-width: 736px) { 
.avia-slideshow li img {
width: 700px;
max-width: 700px;
}}

    Best regards,
    Andy

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