Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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).

    #1468940

    Hey 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
    Enfold Support 6497
    For 6,7,8,9 you can change the position with the Edit Cell ▸ Advanced ▸ Responsive ▸ Mobile Breakpoint Position option:
    Enfold Support 6499
    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:
    Enfold Support 6501
    and change your original sections to hide on mobile.

    Best regards,
    Mike

    • This reply was modified 6 days, 18 hours ago by Rikard.
    #1468949

    this 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.

    #1469173

    Thank you for the ideas!

    #1469180

    Hi,

    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,
    Rikard

    #1469248

    Thank you, this can be closed.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Change order of cells in enfold grid row on mobile’ is closed to new replies.