Archived topic
Love GenerateBlocks, how can I adjust image arrangement for mobile
10 replies · Started by Teresa on March 25, 2020
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
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 :)
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?
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.
Awesome! Thank you.
You're welcome
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?
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.
Finally! For whatever reason that wasn't easy to find xD. Thanks a lot David.
You're welcome. We'll be updating the GB Docs soon to make this a little more easy to find :)
This just answered my same question.
Amazing Support!
Thank you!
