CMS Development

Hawk-Steve
Top colaborador(a)

Positioning CTA to bottom of Module group

resolver

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

0 Avaliação positiva
1 Solução aceita
jzilch
Solução
HubSpot Employee
HubSpot Employee

Positioning CTA to bottom of Module group

resolver

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/

Exibir solução no post original

7 Respostas 7
jzilch
Solução
HubSpot Employee
HubSpot Employee

Positioning CTA to bottom of Module group

resolver

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
Top colaborador(a)

Positioning CTA to bottom of Module group

resolver

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

0 Avaliação positiva
dennisedson
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Positioning CTA to bottom of Module group

resolver

@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
Top colaborador(a)

Positioning CTA to bottom of Module group

resolver

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!

0 Avaliação positiva
dennisedson
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Positioning CTA to bottom of Module group

resolver

@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

 

0 Avaliação positiva
lisaellington
Colaborador(a)

Positioning CTA to bottom of Module group

resolver

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?

0 Avaliação positiva
dennisedson
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Positioning CTA to bottom of Module group

resolver

@lisaellington

@jzilchs fiddle may help