Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 19, 2016 at 1:19 pm #617368
    richardwilding

    Dear Kriesi,

    I am using layouts that have a 2/3 column with an easy slider, followed by a 1/3 column with text. This works well on large screens, but when viewed on small mobile screens the responsive design switches to a single column layout that puts the image column above the text column.

    The problem with this is that when the easy slider changes from a wide image to a tall image, the text column below it keeps moving up and down, making the text difficult to read.

    Is there a way to change the responsive behaviour so that the columns are displayed with the right text column above the left easy slider column?

    Thanks, Richard

    April 21, 2016 at 1:32 pm #619130
    Josue

    Hey Richard!

    You could create a second version of the slider (and place it at the bottom) and use classes like this for each respective slider so the top one only appears in desktop and the bottom one in mobile:

    .only-mobile{
    display: block !important;
}
.only-desktop{
    display: none !important;
}
@media only screen and (min-width: 767px) {
    .only-mobile{ 
        display: none !important;
    }
    .only-desktop{
        display: block !important;
    }
}

    Best regards,
    Josue

    April 22, 2016 at 1:18 pm #619885
    richardwilding

    Thanks Josue, that is a real pity there is no way to do this without having to create duplicate elements on the page. There is no way to do this in code?

    Best w, Richard

    April 22, 2016 at 1:21 pm #619887
    Yigit

    Hi!

    Currently, no. Please feel free to request such feature here – https://kriesi.at/support/enfold-feature-requests/

    Best regards,
    Yigit

    May 12, 2016 at 12:11 am #631020
    argusnet

    How about if I’m using a grid row and want to reverse the columns for mobile. Is there a way to apply a class to the grid row and use the CSS provided?

    May 12, 2016 at 12:35 am #631028
    Yigit

    Hi,

    You can refer to this post to display different elements on mobile and desktop – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    Best regards,
    Yigit

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