Archived topic
Block/Container order in Tablet + Mobile View
3 replies · Started by Matthias on June 14, 2022
Hi,
i am trying to sort a grid in mobile view.
In Desktop it is:
Headline Image1 Image2
Text 1 Image1 Image2
Text 2 Image1 Image2
(Images are the height of Headline + Text combined - not dublicates)
In Table i would liek
Headline Image 1
Text 1 Image 1
Space Image 2
Text 2 Image 2
(again Images should span 2 the height of Headline/Space+Text combined)
In mobile i would like
Headline
Text 1
Image 1
Text 2
Image 2
As i wanted headline + text to be the same size in Desktop i can't (seemingly) simple sort those - at least i didnt get it to work.
When i put the headline over the image its easy - but as i currently have it (headline next to images) i couldnt get it to work.
Hope my question is somehow understandable.
Hi there,
I don't think there's a very easy way.
You can build something like this (the containers are containers under the Grid Block):
https://www.screencast.com/t/r3zpP56VTmDX
1. Give Text 2 in Container 1 two additional CSS class: hide-on-tablet hide-on-mobile.
2. Give Container 3 an additional CSS class: hide-on-desktop.
Well - that way doesn't seem hard to me - cause it does exactly what i want. It's a bit confusing to have an extra block in the editor that doesn't show - ok. But other then that: your solution works great.
Btw - with those css classes i found a doc: Responsive Display
This seem to be related - just in case someone else is looking for info.
Thx a lot. Solved.
Thanks for attaching the documentation :)
Glad it works!
