Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 19, 2016 at 9:25 am #662370
    roderickvs

    I’m trying to accomplish a pattern like http://www.sandranederlof.nl/design-build/ so image left, text right in 2 columns in multiple rows, but on mobile you get off course 2 text blocksfollowing eachtother, 2 images, 2 text blocks etc.. Is there a way to change the order on mobile so that it would be image, text, image text? This without changing the desktop version order?

    July 19, 2016 at 6:32 pm #662669
    Rikard

    Hey Roderick,

    Unfortunately not I’m afraid, if you want to change the order you would have to create separate sections and hide/show the correct ones using CSS. If you want to try that out we can help you out with the appropriate CSS.

    Thanks,
    Rikard

    July 19, 2016 at 6:50 pm #662678
    roderickvs

    Hi,

    I’d love to try that out, standard I see only the hide option in the editor but that won’t do I guess I need something to tell a section to show or hide on desktop / tablet or to show / hide on mobile as a workaround.

    gr,
    Roderick

    July 20, 2016 at 12:56 pm #662929
    Rikard

    Hi, Roderick,

    You can hide/show the correct section by using CSS after giving your sections unique IDs in the element options:

    @media only screen and (max-width: 767px) {
#desktop-section {
display:none !important;
}
}

@media only screen and (min-width: 768px) {
#mobile-section {
display:none !important;
}
}

    Thanks,
    Rikard

    July 20, 2016 at 3:50 pm #663031
    roderickvs

    Hi,

    I seem to be missing something

    1) where do I give an element a unique ID
    2) in the css above I do not see anything pointing to an ID

    Kind regards,

    July 21, 2016 at 11:51 am #663303
    Rikard

    Hi,

    The unique ID is only available with Color Section elements. If you are using other types of elements you can activate the custom CSS class for all builder elements: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/. If you are using classes then you would need to replace the hash sign in my code with a dot instead: 

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

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

    Regards,
    Rikard

    • This reply was modified 8 years, 4 months ago by Rikard.
  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.