Adding display:flex to footer widgets

[matt101]

Hi,

I need to make sure the 3 genesis footer widgets in my theme are the same height, if the site user decides to add more content to any of the 3 widgets. I understand display:flex can do this, if you place it in the parent div for the footer widgets. I can't seem to make this work.

Here is the html:

<div class="footer-widgets"><div class="wrap"><div class="footer-widgets-1 widget-area"><section id="testimonial_footer-3" class="widget widget_testimonial_footer"><div class="widget-wrap"><div id="testimonial_widget"><h4 class="widget-title widgettitle">Testimonial</h4><p class="myclass">Loved being a student at derby skill build. They really helped me grow as a</p><div id='tinyname'> </p> - Louise findlay, former student </div>  </div></section>
</div><div class="footer-widgets-2 widget-area"><section id="blog_widget-2" class="widget widget_blog_widget"><div class="widget-wrap"><h4 class="widget-title widgettitle">Blog</h4>
<ul class="realty_widget">

       <div class="titleblogcolor"> <a href="http://localhost/wordpress/?blog_posts=this-is-a-blog-by-a-student" title="this is a blog by a student">

this is a blog by a student</a></a> </div>

   Find out more about this in our blog. We have lots going on here at Derby Skill Build</ul></div></section>
</div><div class="footer-widgets-3 widget-area"><section id="black-studio-tinymce-2" class="widget widget_black_studio_tinymce"><div class="widget-wrap"><h4 class="widget-title widgettitle">Associated with:</h4>
<div class="textwidget"><p><a href="http://localhost/wordpress/wp-content/uploads/2015/03/council.png"><img class="alignnone size-full wp-image-244" src="http://localhost/wordpress/wp-content/uploads/2015/03/council.png" alt="council" width="80" height="43" /></a> <a href="http://localhost/wordpress/wp-content/uploads/2015/03/edexcel.png"><img class="alignnone size-medium wp-image-245" src="http://localhost/wordpress/wp-content/uploads/2015/03/edexcel.png" alt="edexcel" width="80" height="15" /></a>  <a href="http://localhost/wordpress/wp-content/uploads/2015/03/ofsted.png"><img class="alignnone size-medium wp-image-247" src="http://localhost/wordpress/wp-content/uploads/2015/03/ofsted.png" alt="ofsted" width="80" height="69" /></a> <a href="http://localhost/wordpress/wp-content/uploads/2015/03/woodhead.png"><img class="alignnone size-medium wp-image-248" src="http://localhost/wordpress/wp-content/uploads/2015/03/woodhead.png" alt="woodhead" width="80" height="29" /></a> <a href="http://localhost/wordpress/wp-content/uploads/2015/03/ascentis.png"><img class="alignnone size-medium wp-image-249" src="http://localhost/wordpress/wp-content/uploads/2015/03/ascentis.png" alt="ascentis" width="80" height="49" /></a> <a href="http://localhost/wordpress/wp-content/uploads/2015/03/beauty2.png"><img class="alignnone size-medium wp-image-250" src="http://localhost/wordpress/wp-content/uploads/2015/03/beauty2.png" alt="beauty" width="80" height="35" /></a> <a href="http://localhost/wordpress/wp-content/uploads/2015/03/connexions.png"><img class="alignnone size-medium wp-image-251" src="http://localhost/wordpress/wp-content/uploads/2015/03/connexions.png" alt="connexions" width="100" height="23" /></a></p>
</div></div></section>
</div></div></div>

I have tried:

.footer-widgets { display: flex; }

.footer-widgets .wrap (display: flex; } 

But neither of these work?

[Christoph]

Hi,

display: flex; will only enable the Flexbox.

You will have to define more flexbox selectors to make it work. At least you will have to include
align-items: stretch;

Here's some more info about it:
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
http://the-echoplex.net/flexyboxes/

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts