CSS grid with Oxygen not stretching

This topic contains 3 replies, has 2 voices, and was last updated by  Sebastian 2 weeks ago.

Author Posts

giofra

Hi!

I’m trying to use CSS grids for a repeater made with oxygen. The repeater with just divs works just fine, but the repeater with superbox doesn’t let the child of the grid stretch to 2fr in height or width. They all stay 1frx1fr even if I edit the grid.

Please take a look: https://www.loom.com/share/81d9ea699a284ff5a63c3571ae853330

Is there a way to solve this?


Sebastian

Hey Mulyani,

Apologies for the slow reply, I’m currently on holiday and have only just found some time to reply.

It’s hard to diagnose this without inspecting the actual page, so if you could post a link that would help. But for now, first guess is that you might need to set width to 100% via the All tab on the CSS grid options. That way, the elements should fill the grid tracks you set, rather than being a fixed width, which might be the case.

The MT-Oxygen video demonstrates using the All tab of the grid options: https://youtu.be/wLWeo5MpYPY?t=108

I hope that helps.

Cheers,
Sebastian


giofra

Hi Sebastian,

I tried to set everything to 100%, no luck.

The site was in local development, I moved it to a staging environment so you can analyze the CSS here: https://giofrastaging.host/rosacarbonedesign/

Hope this helps to analyze the problem better


Sebastian

Thanks for sharing a link to the page. I can see that the issue is due to Oxygen’s flexbox styling combing with your grid styles to create unexpected results. To solve this, I recommend resetting the default flexbox styling.

The problem styles are being applied to the parent of the grid container, which has an id of #div_block-882-5, and the following class that adds the flexbox styles:

.ct-div-block {
    flex-direction: column;
    align-items: flex-start;
}

It adds some others, but those two styles are the ones we need to override. You can use MT’s visual targeting to target the parent of the grid container; the HTML pane, breadcrumbs, or directional arrows may help with that. Or you can use the following custom selector (which you can add to a folder in the selectors menu).

#div_block-882-5.ct-div-block {
    flex-direction: row;
    align-items: normal;
}

You set the two flexbox properties (flex-direction and align-items) via the MT UI fields, or by copying and pasting the above code into the code editor (to the left of the Font property group). The id and class selector above ensures you only override the default Oxygen styling for this specific case, not all elements with the class “ct-div-block”.

Once you have overridden those styles, your grid child elements should fit the 2fr grid tracks you defined.

Oxygen flexbox styles overridden for CSS grid

Does that make sense and seem doable?

Thanks,
Sebastian

You must login or register to reply to this topic.