How to align at the bottom two block

Site URL: https://changemavie.com/coaching

Hi !

I need to align on the bottom two block of pricing.

It does not align in all size of screen.

@tuanphan Thanks for your help !

website : https://changemavie.com/coaching

Section 37

@Esoes_design How are you trying to align the pricing blocks? Are you reliant on them being the same height with an additional spacer block at the top on the left?

@Ziggy

The pink one is and must be bigger.

The blue one is smaller and have a spacing block at top to align bottom, but obviously when the sceen change, the alignment on bottom is not ok.

Is there any code to align at the bottom this two block ?

THX

Attaching to the bottom is tricky in 7.0, it's easier in 7.1 with Fluid Engine. In your case you may be able to standardize the heights by adding "min-height" properties to blocks on both sides. It would need some finessing and trial and error, along with a few media queries.

@Ziggy

Thanks for your answer but I don't understand how " to standardize the heights by adding "min-height" properties to blocks on both sides" will align on the bottom.

You can try this:

@media only screen and (min-width:640px) {
  #block-yui_3_17_2_1_1663950822871_9610, #block-yui_3_17_2_1_1663950822871_17978 {
   min-height:420px;
 }
}

It may not work exactly right, and you'll need a very different solution for views on tablet, this might help, it will hide the spacer blocks.

@media only screen and (max-width:1000px) {
  #block-yui_3_17_2_1_1663937824329_13526, #block-yui_3_17_2_1_1663937824329_13137 {
    display:none;
  }
}