[Resolved] Mobile footer menu – widget to line up in same row

[Nov]

Hi,

I have 3 footer widgets, the first two are menus and the third one is custom HTML.
Because the first 2 are not very wide, in the mobile view I want it to be in the same row.
The third widget can be below that no problem.

I tried previous code on this forum but that appears to only apply for non-menu widgets?

[Leo]

Hi there,

Give this CSS a shot:

@media (max-width: 768px) {
    .footer-widgets .footer-widget-1 {
        flex-basis: 50%;

    }
    .footer-widgets .footer-widget-2 {
        flex-basis: 50%;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Nov]

Hmm.. don’t seem to work. Nothing changed. Widget 1 and Widget 2 still above and below each other.

[David]

Hi there,

try this CSS:

@media (max-width: 768px) {
  .footer-widgets .inside-footer-widgets {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .footer-widgets .footer-widget-1,
  .footer-widgets .footer-widget-2 {
      flex-basis: 50%;      

  }
}

[Nov]

Thanks! That Worked.

[David]

Glad to hear that!

[Author]

Posts