Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • May 8, 2016 at 5:25 pm #628877
    richardhofer83

    hi guys
    i want to adjust the fullwidth slider for mobile devices so that the picture in the slider is higher and that there is enough space for caption and button
    it doenst matter that then parts of the picture wont show and will be cut off on the sides

    also i want to change font color of the h2 caption inside the slider without changing the h2 for the whole website, what is the specifig css code for the slider captions?

    see example and website in private content

    thank you!
    greetings
    richard

    May 10, 2016 at 11:37 am #629815
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    @media only screen and (max-width: 480px) {
    ul.avia-slideshow-inner {
        min-height: 210px !important;
    }

    .av_slideshow_full li,
    .av_slideshow_full .avia-slide-wrap,
    .av_slideshow_full li img {
        height: 100% !important;
    }

}

    Cheers! 
    Josue

    May 10, 2016 at 1:41 pm #629895
    richardhofer83

    hi josue,
    now the image is higher but its all distorted
    i left the css code active so you can check it out with your mobile device

    important: i changed the passwort to the site so please check private content

    May 10, 2016 at 1:53 pm #629902
    Josue

    Try with this instead:

    @media only screen and (max-width: 480px) {
    ul.avia-slideshow-inner {
        min-height: 210px !important;
    }

    .av_slideshow_full li,
    .av_slideshow_full .avia-slide-wrap {
        height: 100% !important;
    }

    .av_slideshow_full li img{
        -webkit-transform: scale(4)
    }
}

    That won’t stretch the image but will scale it so it fills the height of the container (210px).

    May 10, 2016 at 2:06 pm #629912
    richardhofer83

    ok its kind of working, the sliding motions is a bit weird (because the picture is bigger than the screen), can we fix that?

    what is this part excactly doing?

        .av_slideshow_full li img{
        -webkit-transform: scale(4)
    May 10, 2016 at 2:15 pm #629921
    Josue

    Hm, try changing the slider animation to Fade, that part of the code scales the image up so it fills the whole height of the container (instead of stretching it).

    May 10, 2016 at 4:50 pm #630085
    richardhofer83

    ok now with fade thats fixed

    but now there is another problem, when you load the page the caption of the first slide show image is not properly shown, only the button but not the text above it.
    but then when you tap left left to come to the same picture agaian, the caption is on the right place

    i tried some code with vertical align but couldnt fix it.

    thank you

    May 10, 2016 at 5:26 pm #630134
    Josue

    Can you please disable the slider automatic rotation.

    May 11, 2016 at 9:30 am #630536
    richardhofer83

    i did but i doesnt change this particular problem that the caption and the button get kinda stuck on top of the slider, when you load the page for the first time. it seems like the caption including button is loading in the “wrong” position
    see screenshot in private

    May 12, 2016 at 1:19 pm #631329
    Andy

    Hi,

    I noticed that you are using a caching plugin. Would you mind opening your plugin’s settings page and temporarily deactivate the caching of your site? Then please try to clear your browser cache and hard refresh the site (Hold CTRL + SHIFT + RELOAD) to see if that solves the issue.

    Best regards,
    Andy

    May 12, 2016 at 1:38 pm #631344
    richardhofer83

    it was also like this before i activated the caching plugin, that the caption gets stuck outside the frame

    cant i specify exactly where the caption on mobile devices should be (with like coordinates?)

    is it working on your phone?

    May 12, 2016 at 1:54 pm #631369
    Josue

    Hi,

    The reason i asked to disable auto-rotation was so i can debug the slider caption, would be easier if you could hand me a WordPress administrator account via private reply so i can test the slider settings as needed.

    Regards,
    Josue

    • This reply was modified 8 years ago by Josue.
    May 12, 2016 at 7:42 pm #631556
    richardhofer83

    ok sorry, here you go
    i disabled auto rotation again

    May 16, 2016 at 4:23 am #632658
    Ismael

    Hey!

    We adjusted the css code a bit:

    
@media only screen and (max-width: 480px) {
    ul.avia-slideshow-inner {
        min-height: 210px !important;
    }

    .av_slideshow_full li,
    .av_slideshow_full .avia-slide-wrap {
        height: 100% !important;
    }

    .av_slideshow_full li img{
        -webkit-transform: scale(7);
transform: scale(7);
    }

.responsive #top .slideshow_caption h2 {
    font-size: 14px !important;
}

#top .avia-slideshow-button {
    padding: 7px 11px;
    font-size: 11px;
    margin-top: 10px;
}
}

    Regards,
    Ismael

    May 19, 2016 at 1:28 pm #635153
    richardhofer83

    thank you

    it still doesnt show the full caption text of the slider when you load the page on a mobile device (see image in private content)
    ist it working on your mobile phone?

    if that way is not working, can you disable the animation of the text and the button? maybe that is the problem?

    May 21, 2016 at 3:46 am #636106
    Ismael

    Hi,

    The animations should be supported on mobile browsers. What is your mobile device? Anyway, you can disable it with the following:

    EDITED: Incorrect css code.

    Best regards,
    Ismael

    May 24, 2016 at 9:51 pm #637745
    richardhofer83

    ok that changes the animation of the slider when it flips the page

    my device is iphone 4s and 5c i tried on both, same thing… safari browser

    i dont know if i didnt describ my problem in the right way or if there is just no way to display the full width slider (with text and buttons) correctly on a mobile device

    please please open the site on your mobile device and see the problem for you self

    thanks
    greetings

    May 27, 2016 at 3:54 am #639044
    Ismael

    Hey!

    My bad. The code above was incorrect. Please try the following:

    @media only screen and (max-width: 767px) {
.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-title, .avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-title {
    visibility: visible;
    -webkit-animation: none;
    animation: none;
    opacity: 1;
    -webkit-transform: translate(0,0) !important;    
    transform: translate(0,0) !important;
}
}

    That should disable the caption animation. If you want to hide the text and captions on mobile, please use the following:

    @media only screen and (max-width: 767px) {
.responsive #top .slideshow_caption {
    display: none !important;
}
}

    Regards,
    Ismael

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