Footer widgets responsive 4-2-1 columns top margin

[cvdw]

Hi,

I managed to get my footer to go from 4 to 2 to 1 column responsive, only on 2 columns, the first in the second column has to much top margin.

It’s this css:

.x-colophon.top .x-column .widget:first-child {
margin-top: 3em;
}

I can make a rule like this:

@media (min-width: 481px) and (max-width: 979px) {
.x-colophon.top .x-column .widget:first-child {
margin-top: 0em;
}
}

But then it’s also applied to the other widgets.

Is there a way to solve this so the widgets are lined in 2 columns?

The test site is: https://bubbels.nl/wp/

Kind regards, Carel

[christian]

Hey Carel,

Your selector targets all first widgets. Please see the screenshot below. I believe the misaligned widget is your problem?

That’s because of this CSS in our theme.

@media (max-width: 979px) {
  .x-colophon.top .x-column:first-child .widget:first-child {
      margin-top: 0;
  }
}

You will need to take that into account as well.

Please just note that we do not support theme customization. We can help with minor cosmetic changes but not structural changes such as changing responsive column layouts. If you wish to customize our themes using custom code, you will need to forward questions to a third-party developer and s/he will be the one to write the custom codes for you.

Hope that helps and thank you for understanding.

[cvdw]

Okay, thx, but can you help me to align those widgets…?

I tried all the options I could find but or change all widgets or nothing happens…

[jade]

Hi @cvdw,

Please add this code in X > Theme Options > CSS:

@media (max-width: 979px) {
  .x-colophon.top .x-column:first-child .widget:first-child {
      margin-top: 3em;
  }

  .x-colophon.top .x-container.max {
    display: flex;
    flex-wrap: wrap;
  }
  
}

Hope this helps.

[cvdw]

YES! That did the job! Thank you so much!

[jade]

You’re most welcome, @cvdw.