Footer widgets misaligned when using column CSS

  • irfanquader · Member ·

    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)

  • irfanquader · Member ·

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

    Thanks!

  • fotispapafotiou · Theme Author ·

    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.

  • irfanquader · Member ·

    This worked perfectly! Thanks!

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