Adding display: flex to a wrapper div

SOLVE
asacurry
Member

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?

0 Upvotes
1 Accepted solution

Accepted Solutions
stefen
Solution
Key Advisor | Partner

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;
}
Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

5 Replies 5
relabidin
HubSpot Alumni

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  

0 Upvotes
stefen
Solution
Key Advisor | Partner

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;
}
Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

ndwilliams3
Key Advisor

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

asacurry
Member

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

 

Many thanks!

Hawk-Steve
Top Contributor

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

0 Upvotes