Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 16, 2015 at 6:11 pm #412385
    WEBIGAMI

    Hi Team,

    would it be possible to have a fixed image in the fullwidth easy slidehow? It should resize from desktop to mobile and always show the same image detail – the same function like the “scrolled” display in a background image of a color section.

    Now, only a special detail of the image can be seen on mobile devices instead of the complete image.

    Thanks and cheers,
    Jan :)

    March 16, 2015 at 9:55 pm #412616
    Elliott

    Hi Jan!

    If you resize your screen then the fullwidth easy slider should resize itself and the images inside to cover the whole screen. If that’s not happening on your end then send us a link and we’ll take a look.

    Cheers!
    Elliott

    March 17, 2015 at 2:52 pm #412960
    WEBIGAMI

    Hi Elliott,

    please take a look at this website:

    http://justcom.de

    The Full Width Easy Slideshow is on every page at the very top. When you resize the browser, only the left part of the image will be shown on mobile devices.

    In Quick CSS I have the following code for the slideshows for showing all the content of the Title, Caption and Buttons. Without the code, the buttons won’t show on mobile devices. Can you add something for showing 100 % of the image. Or another code so that all the content will be shown on mobile devices?

    @media only screen and (max-width: 480px) {
    #full_slider_1 .avia-slideshow-inner, #full_slider_1 img{
        height: 250px !important;
        width: 900px !important;
        right: 245px;
    }
}

@media only screen and (max-width: 768px) {
    #full_slider_1 .avia-slideshow-inner, #full_slider_1 img{
        height: 315px !important;
        width: 1100px !important;
        right: 40px;
    }
}

    Thanks and Cheers,
    Jan :)

    March 18, 2015 at 12:53 pm #413561
    Ismael

    Hey!

    The css code above will only show 10% of the images. Try this:

    @media only screen and (max-width: 768px) {
#full_slider_1 .avia-slideshow-inner, #full_slider_1 img {
  height: 315px !important;
  width: 150% !important;
  left: -50%;
}}

@media only screen and (max-width: 480px) {
#full_slider_1 .avia-slideshow-inner, #full_slider_1 img {
  height: 250px !important;
}}

    It will not show exactly like the desktop view but you will get most part of the images. You should turn on the custom css class if you’re trying to modify a specific element such as the slider: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Regards,
    Ismael

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