Stretch Final Cell in Looper

[tomr96]

Hello,

I am wondering if there is a method that would allow me to stretch the last cell in a looper to full width.

The setup is as above, but the final cell is shown on it’s own and not stretched across the full width of the grid.

I am able to edit this manually using the grid edit button if these were normal cells, but as I am using a looper cell this option isn’t available and so I am struggling to get this working.

Any advice would be appreciated.

Thanks, Tom.

[christian]

Hey Tom,

Regretfully, that can only be achieved using custom CSS. Below is a sample code that should be added to the Grid element’s Element CSS. This is assuming a 1fr 1fr 1fr 1fr grid setup.

Note that this will not work in the builder but only in the frontend. You will need to change the values in the code. They’re basically are the same as Cell Layout options.

$el .x-cell:last-child {
  grid-column-start: 1 !important;
    grid-column-end: 5 !important;
    grid-row-start: 2 !important;
    grid-row-end: 4 !important;
}

Since this requires custom coding, regretfully, we cannot continue on diving deeper on this. If you wish to receive custom CSS guidance, you might want to consider subscribing to our One premium support.

Hope that helps.

[tomr96]

Thanks for this.

I have decided to use the Row element to achieve this with Pro features.

Thanks, Tom.

[marc_a]

Hey Tom,

Great! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.