Positioning CTA to bottom of Module group

SOLVE
Top Contributor

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;
}

Positioning1.PNG

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.

Positioning2.PNG

 

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

 

Steve

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
HubSpot Moderator

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/

7 Replies
Regular Advisor | Platinum Partner

@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

 

dennis
Reply
0 Upvotes
Occasional Contributor

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?

Reply
0 Upvotes
Regular Advisor | Platinum Partner

@lisaellington

@jzilchs fiddle may help

dennis
Highlighted
HubSpot Moderator

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/

Top Contributor

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! Smiley Happy

 

Steve

Reply
0 Upvotes
Regular Advisor | Platinum Partner

@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.  

dennis
Top Contributor

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!

Reply
0 Upvotes