Footer widgets misaligned when using column CSS

  • Hi!

    I’ve used the following code (which I found in a previous question on this forum) to display the footer widgets in columns instead of one over the other:

    .widget-area-footer{display:flex;}
    .widget-area-footer section{width:33%;padding:20px}

    The problem is that the last widget shows a little higher than the others. I’ve noticed that, if I insert a blank widget after the last one, they all align fine. But then I have a blank column at the end.

    Is there some way I can get all the footer widgets to align properly?

    Thanks for your help.

    The blog I need help with is: (visible only to logged in users)

  • I’ve just realized that the columns also don’t stack on mobile. Can this be fixed, too?

    Thanks!

  • Hi,
    try this

    
    @media(min-width:767px){
    .widget-area-footer{display:flex;}
    .widget-area-footer section{width:33%;padding:0 20px}
    }
    }

    instead.

    Let me know if this worked for you.

  • This worked perfectly! Thanks!

  • The topic ‘Footer widgets misaligned when using column CSS’ is closed to new replies.