Positioning CTA to bottom of Module group

[Hawk-Steve]

Morning all

I have 3 module groups with CTAs at the bottom, I have also applied equal-heights to the groups to level out the bottom.

.equal-heights > .row-fluid-wrapper > .row-fluid {
  display: flex;
  flex-wrap: wrap;
}

I would like to set the CTA to sit at the bottom of the module group, level with the lowest CTA module of the 3.

I had a play around with absolute/relative positioning but didn't get much luck, any ideas?

Steve

[jzilch · Accepted solution]

Hi, 

Going off of what @Hawk-Steve was saying you will need to make sure you apply display flex to items inside as well. Normally you're adding the default to the main container which would be row and then inside such as a the post-item you can make this a column layout and even use flex-grow to expand the post-body to be full width of the container. I created this simple demo which hopefully will help. 

https://jsfiddle.net/pkum39bo/6/

[Hawk-Steve]

Hi Jzilch

Thanks for the answer, I simply dropped your code into the website which works great in a single rich-text module.

As a last question, could you advise on the best way to do this when using modules and module groups? When applying the changes to the modules and groups I believe some Hubspot layout behaviour is getting in the way, preventing this from working.

Cheers again! 🙂

Steve

[dennisedson]

@Hawk-Steve

i would build a module specific to this need.  

create necessary fields, group them and toggle the repeater switch.

wrap the for loop around the item.  then you can use  this one module to repeat on your page.  

[Hawk-Steve]

Thanks Dennis

I will give it a go, need to learn how custom modules/Hubl works at some point, this is as good a place as any!

[dennisedson]

@Hawk-Steve, you need flex in the individual modules groups.  assign a class to them and add your styles. 

here is a demo of something similar i did for someone else

[lisaellington]

I looked at your demo and when I take the 300px height, it doesn't work. Does anyone have something that works without having to identify the height?

[dennisedson]

@lisaellington

@jzilchs fiddle may help