[Resolved] Mobile grid layout/order of appearance

[Jessica]

Hi there! I’m trying to figure out if there’s a way to have my grid sections show up on mobile as Headline – Photo – Paragraph Text/Button. For example, on this page: https://bellabluephoto.e.wpstage.net/about/ I have it set up as a container with a 50/50 grid within it, but I’d love it to show headline then photo then the rest of it on mobile. I don’t want to put the Headline in a container above the grid on its own (I want it lined up on desktop still), so is there any way to change the order of the things within the container within the grid when they show up on mobile that doesn’t sacrifice that nice look on desktop? Thanks!

[Leo]

Hi Jessica,

This should help:
https://docs.generateblocks.com/article/container-overview/#order

[Jessica]

Hey Leo, I’ve played around with the order but my issue is that I don’t have different containers to order. I have a grid 50/50 with one container containing the headline, paragraph text, and button, then a separate container for the image on the other side. What I’m trying to do is get the headline to show, then the image, then the paragraph text/button, but there are only two containers, not three. If I put the headline in its own container above, it won’t center everything on desktop vertically. Does that make sense?

Here’s another example where I’d love to do it on my own site: https://www.jesskenn.com/

In the second section, I’d like to have the headline show up, then my image, then the text/button. But I want the headline/test/button all centered vertically with the image. Let me know if that makes sense and/or if that just isn’t possible with GP. It’s a format I use a lot for websites and would love to make it look better on mobile. Thanks a bunch!

[Elvin]

Hi Jessica,

Hey Leo, I’ve played around with the order but my issue is that I don’t have different containers to order. I have a grid 50/50 with one container containing the headline, paragraph text, and button, then a separate container for the image on the other side. What I’m trying to do is get the headline to show, then the image, then the paragraph text/button, but there are only two containers, not three. If I put the headline in its own container above, it won’t center everything on desktop vertically. Does that make sense?

Yeah that makes sense because the HTML structure won’t be conducive to re-ordering things because the only option you’ll have would be to either have:

[Photo] > [ headline > paragraph ] or [ headline > paragraph ] > [ Photo ] because no matter how to do flex order, you can’t insert in the photo between the headline and the paragraph because it’s not a sibling element.

Here’s what I’d do though:

I’d duplicate the paragraph block and put it under the photo. I’ll then add a CSS class hide-on-desktop and hide-on-tablet on it so it’s only visible on mobile.

And then I’ll add hide-on-mobile on the paragraph block under the Headline block. This is so it’s only visible on tablet and mobile.

So basically, you have 2 paragraph block of the same content. 1 shows below the headline (on desktop) and the other shows below the photo (on mobile).

This way you’ll still have the same layout you have on desktop while having Headline > Photo > Paragraph on mobile.

In the second section, I’d like to have the headline show up, then my image, then the text/button. But I want the headline/test/button all centered vertically with the image. Let me know if that makes sense and/or if that just isn’t possible with GP. It’s a format I use a lot for websites and would love to make it look better on mobile. Thanks a bunch!

I’m not sure I understand what you mean. Can you provide any mockup images?

[Jessica]

Great call, Elvin. That worked perfectly! Thanks so much for that idea!

[Elvin]

Yeah, for things like this, you may have to repeat this kind of trick.

It’s not optimal but it gets the job done.

If you must duplicate something for different viewports, go with text first as duplicating image blocks have more impact in performance.

No problem. Glad it works for you. 😀

[Jessica]

Ahh good to know about not duplicating the image blocks! Thanks again for the creative solution, this is working great on both sites.

[Elvin]

It’s following the same concept of the theme’s Mobile Header which also only shows up on mobile.

Let us know if you need further help. 😀

[Author]

Posts