Footer - Align items to top.

Hello :grinning_face:

I have a little problem, my footer isn’t verically aligned and i don’t understand why.

I use the boilerplate CMS.

the code of template :

<!-- Begin partial -->
<footer class="footer footer--blog">
 {% dnd_area 'footer' class='footer__container content-wrapper', label='Footer' %}

 {# Social follow and copyright section #}
 {% dnd_section %}
 {% dnd_column %}
 {% dnd_row %}
 {% dnd_module path='../../modules/social-follow',
 label='Social follow'
 %}
 {% module_attribute 'social_link' is_json=True %}
 [
 {"social_account": "facebook-f"},
 {"social_account": "linkedin-in"},
 {"social_account": "twitter"},
 {"social_account": "instagram"}
 ]
 {% end_module_attribute %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% dnd_row
 margin={
 'top': 12,
 'bottom': 12
 }
 %}
 {% dnd_module path='@hubspot/rich_text' %}
 {% module_attribute 'html' %}
 <div style="text-align: center; font-size: 0.7rem;">
 <span>Birdee is a CSSF registered portfolio manager © Birdee 2019</span>
 </div>
 {% end_module_attribute %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% end_dnd_section %}
 {# End social follow and copyright section #}

 {% end_dnd_area %}
</footer>

Thank you

Hello @FelTigre,

your footer is basicly aligned verticaly for every column. But i guess u want to align it to the top? So the top Headlines are on the same hight.
Could you provide us a preview link to the page, so we can look into it.

Thank You
Chris

Hello @Chris-M,

Yes, i want to align all items to the top :grin:

You can see “Réseaux sociaux” isn’t aligned with “Besoin d’aide”. i think each column is vertically aligned to center.

A link to my blog :

https://blog.birdee.co/

Thank you and have a nice day :smiley:

Hello @FelTigre,
none of these columns are on the same hight.

It’s because u have “justify-content: center” on each column (span4).
Each column will be alignt to vertically in relation to the “row-fluid” size/height.

Since the first and the second column are close to the same hight, ur not noticing it on the first look. The third column has way less content/height, so here u will notice the vertical alignment to the row.
If you remove the “justify-content: center”, your headlines will be on the same hight again.

Hope this will solve your probleme.
Have a nice day!

- Chris

Thank you @Chris-M

but is there a solution to modify it in my template so that later, when i add another column with a smaller item, it is aligned to the top ?

if there no solution, i can do this with CSS :grin:

@FelTigre

You can change the aligment of the dnd_areas, etc. on the Template:

Hi @Chris-M

Sorry i was very busy, i’ll try to make this change in the dnd_areas :grin:
Thank you