-
AuthorPosts
-
October 11, 2024 at 4:51 pm #1468935
I need to change the order of cells when the cells move to single column, for example, when viewed on mobile. I need cell 5 to move to position 10, and cell 6 to move to position 7, cell 7 to move to position 6, cell 8 to move to position 9, cell 9 to move to position 8, and cell 15 to disappear. How can this be achieved?
If possible, I’d also like the images to stretch to fit (fully fill the cell—and only the cell—regardless of browser width).
October 11, 2024 at 5:38 pm #1468940Hey Tanja,
I believe that you are referring to this section:
*removed*
To hide cell 15 use the Edit Cell ▸ Advanced ▸ Responsive ▸ Mobile display and change to Hide on Mobile
For 6,7,8,9 you can change the position with the Edit Cell ▸ Advanced ▸ Responsive ▸ Mobile Breakpoint Position option:
Note that this is for this one grid row, so the numbers are a little different, but you can’t move from row to row. So to move 5 to 10 I recommend cloning all three sections and organize them the way you want for mobile and set the Grid Row ▸ Advanced ▸ Responsive ▸ Element Visibility to hide on desktop:
and change your original sections to hide on mobile.Best regards,
Mike- This reply was modified 2 months, 1 week ago by Rikard.
October 11, 2024 at 8:33 pm #1468949this will be hard to get – because each of the grid-rows are a unique container.
you can define the order inside this grid-row ( like mike shows above) – but not switch between different grid-rows.i would do this with color-section and 15 1/5 columns ( this is not needed because width will be set in a different way ) – and it looks nicer in the backend.
We have total control over all columns by giving them unique names ( this is better to handle – then the css selectors )
( on my example page : feld1, feld2 etc ( that means field1, field2 etc. ) )the position is set by the property: grid-template-areas
see example including code on: https://webers-testseite.de/griddy/see what happens in between 550px and 767px – you can combine ( like in a table with colspan or rowspan) areas and fill with only one field.
see when the responsive view is on one Column only. the area 5 is above area 10 etc.October 15, 2024 at 4:53 pm #1469173Thank you for the ideas!
October 15, 2024 at 6:32 pm #1469180Hi,
Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
RikardOctober 16, 2024 at 4:42 pm #1469248Thank you, this can be closed.
-
AuthorPosts
- The topic ‘Change order of cells in enfold grid row on mobile’ is closed to new replies.