Adding display: flex to a wrapper div

[asacurry]

Hello, 

I'm trying to vertically center an image in a responsive div using flexbox. I can assign display:flex to the group in the template editor, but upon inspecting the preview it looks like it needs to be applied to a .row-fluid that is wrapped around the images. 

Is there a way to apply the flex attribute to the immediate parent (which I can't seem to access using the layout editor), or have the .row-fluid div inherit it from a class applied to the module group?

[relabidin]

Hi @asacurry,

This is a great question that goes a bit over my head. 

@ndwilliams3 and @stefen are our resident design experts. Would you mind taking a quick look here?

Rami  

[stefen · Accepted solution]

Give your module group a custom class. Then in your stylesheet you can use the class as a way to pinpoint that row-fluid class like so:

.my-custom-class > .row-fluid-wrapper > .row-fluid {
  display: flex;
  align-items: center;
}

[Hawk-Steve]

Hi Stefan

Thanks for the answer, I've been looking into this for quite some time.

What had confused me is that I thought > was used left to right. Parent element > Child element, your answer seems to go the opposite direction child > parent/child > parent

[asacurry]

exactly what I needed, was missing the ">"....

Many thanks!

[ndwilliams3]

I agree with @stefen. That would be the best approach.