Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #413472

    Hi Guys,
    Really impressed with the new update. Loads of features that are really helpful! Keep up the good work!

    We really like the grid row order http://kriesi.at/themes/enfold-shop/about/.
    On desktop the order of the grid row is:
    Text | Picture
    Picture | Text
    Text | Picture

    On mobile this becomes:
    Text
    Picture
    Picture
    Text
    Text
    Picture

    Is there any way to change this order on mobile?(to for example: Picture, Text, Picture, Text, etc.) I Noticed the new option “Cell appears besides each other” but this is not what i mean ;).

    Hope to hear from you,

    Kind Regards,
    Jeroen

    #413890

    Hi Hotelsolutions!

    On smaller screens the columns change to 100% width so it’s whatever comes first in the document that gets displayed first. Since the columns are floated left the ones on the left will be displayed first.

    If you’d like we can give you some CSS so they are floated right instead but you would have to edit all of your columns and change the order again.

    Cheers!
    Elliott

    #504234

    I’m interested in the solution as well..

    #504257

    Hey!

    Send us a link to your page and we’ll take a look.

    Cheers!
    Elliott

    #504262

    Its beaufort.rubiq.cz. Ideally it would be Image – text – image – text etc

    #504545

    Hi,

    I think the easiest solution for that result would be to create a new section and design it the way you want it to flow on mobile and then to hide the new section for all screen sizes and show it only for mobile. You can turn on custom CSS field for your ALB items by following this: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/. You can then add custom CSS like this:

    @media only screen and (max-width: 767px) {
    .show-for-mobile {
    display:block !important;
    }
    .hide-for-mobile {
    display:none !important;
    }
    }
    
    @media only screen and (min-width: 768px) {
    .show-for-mobile {
    display:none !important;
    }
    .hide-for-mobile {
    display:block !important;
    }
    }

    Add the show-for-mobile class to the section you want to show on mobile and the hide-for-mobile to the one you want to show on all other screen sizes.

    Best regards,
    Rikard

    • This reply was modified 9 years, 3 months ago by Rikard.
    #511866

    This topic is exactly what I meant to ask here: https://kriesi.at/support/topic/grid-row-order-on-mobile-2/ – so I’ve tried implementing the code you suggest on this post and I can’t seem to get the sections to hide on a desktop.
    http://www.crestedbuttecomputers.com/dev/turbo-lease/3rd-party-integration-turbo-lease-accounting-management-software/

    #512017

    Hi @ewingmh,

    Let’s stick to one thread regarding this one problem, I’ve replied to the thread you linked above.

    Best regards,
    Rikard

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Grid row Order on mobile’ is closed to new replies.