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

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

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

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

    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
    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
    Teresa

    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
    Staff
    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
    Teresa

    Awesome! Thank you.

    #1211668
    David
    Staff
    Customer Support
    #1465108
    eduard sans

    Hi there, I can’t find the “Order” option under advanced options in the Container block. All I see are the options for the element tag, ID, class and z-index. Am I missing something?

    Screenshot

    #1465146
    David
    Staff
    Customer Support

    Hi there,

    the order field is available in the Grid Block – select each Grid Item, then under Layout, switch to Tablet or Mobile View and you will see the Order field.

    #1465212
    eduard sans

    Finally! For whatever reason that wasn’t easy to find xD. Thanks a lot David.

    #1465227
    David
    Staff
    Customer Support

    You’re welcome. We’ll be updating the GB Docs soon to make this a little more easy to find ๐Ÿ™‚

    #1613627
    Scott

    This just answered my same question.
    Amazing Support!
    Thank you!

    {"entry":[{"id":"142643044","hash":"1df7be59affdf5fade27bf825433b366","requestHash":"scottkepnes","profileUrl":"http:\/\/gravatar.com\/scottkepnes","preferredUsername":"scottkepnes","thumbnailUrl":"http:\/\/0.gravatar.com\/avatar\/1df7be59affdf5fade27bf825433b366","photos":[{"value":"http:\/\/0.gravatar.com\/avatar\/1df7be59affdf5fade27bf825433b366","type":"thumbnail"}],"name":{"givenName":"Scott","familyName":"Kepnes","formatted":"Scott Kepnes"},

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