[Resolved] Grid column order on mobile

[Author]

Posts

[aleksiH]

Hi,

thanks for toolset.

i'd like to have a specific order for column when they stack on mobile. Currently there's only option to reverse.

hidden link

i'v tried adding CSS classe to each grid cell, to manually order them via CSS, but it seems adding CSS classe to the grid cells is not working.

editing the block via html results in an error "this block contain unexpected or invalid content".

[Nigel]

I guess the problem is with the CSS you are applying or how you are adding the CSS.

On my own local test site I inserted a grid with 3 columns and 2 rows and just included a paragraph block with "cell 1", "cell 2" etc. for content.

Selecting each grid-cell block I added a class name ("cell-1", "cell-2", etc.).

(Be sure you have pressed enter when adding the custom class in the Advanced tab, as shown in the screenshot.)

To add custom CSS I simply added a Custom HTML block to the page and added the CSS within a style element, e.g.

<style type="text/css">
.cell-4 {
  grid-row: 2
}
</style>

(This is a simple example where I work on a narrow screen to see the stacked results; you'll want to include media queries to determine when these extra rules take effect.)

As you can see in the main screenshot, the 4th grid cell is correctly shifted into the second position, as expected.

[aleksiH]

Yes, that's specifically the issue i was talking about; adding CSS class in the block settings was not working, it goes blank right after i was adding the CSS class.

But it just worked now when i reloaded the page.

Just something you might be aware of in case you encounter this.

Thanks for the support.