Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 18, 2015 at 9:23 am #413472
    Hotelsolutions

    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

    March 18, 2015 at 6:53 pm #413890
    Elliott

    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

    September 16, 2015 at 3:59 pm #504234
    bahamencz

    I’m interested in the solution as well..

    September 16, 2015 at 4:28 pm #504257
    Elliott

    Hey!

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

    Cheers!
    Elliott

    September 16, 2015 at 4:29 pm #504262
    bahamencz

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

    September 17, 2015 at 7:26 am #504545
    Rikard

    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, 1 month ago by Rikard.
    September 30, 2015 at 11:20 pm #511866
    ewingmh

    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/

    October 1, 2015 at 9:26 am #512017
    Rikard

    Hi @ewingmh,

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

    Best regards,
    Rikard

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