[Resolved] Love GenerateBlocks, how can I adjust image arrangement for mobile

Home Forums Support Love GenerateBlocks, how can I adjust image arrangement for mobile

This topic contains 5 replies, has 3 voices, and was last updated by  David 1 week, 2 days ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1210009

    Tris

    We’ve been using GeneratePress for almost a year now and are really happy with how Sections and Elements make our lives easier.

    Yesterday I started playing with the new GenerateBlocks plugin. I’ve been able to recreate a lot of what I’ve been able to do with Sections, etc except for one thing: How to get the order of images and text right on desktop vs mobile.

    On my site I have the standard:

    image – text
    text – image
    image – text

    layout.

    On mobile, however (and of course) I get

    image
    text
    image
    image
    text

    What’s the best way using GenerateBlocks (without duplicating images and having them show/hide on mobile) to get

    image
    text
    image
    text
    image
    text

    On mobile.

    I’m good with editing CSS and HTML to make this work.

    Thanks in advance

    #1210175

    Tom Lead Developer

    Hi there,

    Check out the “Order” option in the Container block under “Advanced”. You can order each container block on all devices. Negative orders are possible as well.

    We do this on the GenerateBlocks homepage right now 🙂

    #1210198

    Tris

    Thanks Tom! I found that option about 30 mins after I asked. Thank you for confirming I was on the right track.

    I found to keep things controlled right I put each grid its own container. Doing the “add grid” into the same container had very unexpected results. Unless I had to number order each thing. If I did that would order 1 be top and order n+1 be next in line?

    #1210453

    David Customer Support

    Hi there,

    yes 1 would place the item at the top in a mobile stack, as long as you then give every other grid item a higher order value as well.

    However, with the order value – it is the lowest value that comes first which includes negative numbers. Example:
    if you have a two column grid. And you want the right hand column to appear first on mobile give it an order value of -1.
    You don’t need to give the left hand column a value as it has an implied ( automatic ) value of 1.

    #1210900

    Tris

    Awesome! Thank you.

    #1211668

    David Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.