[Resolved] Footer CSS not working

[v4ncouver]

Hi guys,
I installed a “Custom CSS” plugin and added various styles.

None of them make my site footer look good.

I think that the footer is the weak link in an otherwise amazing theme.

I’ve added these styles which create an ugly mess:

@media (min-width: 769px) {
.active-footer-widgets-5 .footer-widget-1 {
width: 20%;
}

.active-footer-widgets-5 .footer-widget-2 {
width: 20%;
}

.active-footer-widgets-5 .footer-widget-3 {
width: 20%;
}

.active-footer-widgets-5 .footer-widget-4 {
width: 20%;
}
.active-footer-widgets-5 .footer-widget-5 {
width: 20%;
}
}

I expected five equally wide columns (as there would be without additional CSS) but instead, everything is smashed to the left. Ugly.

How are you guys solving this?

I use 5 widgets and there is way too much room. It looks bad on every device. Lots of wasted space everywhere.

Any hints?

[v4ncouver]

I am playing with different values, min and max widths and no success.

What I want is this:

At full page width (1140 px), there should be 5 footer widgets in a row with these widths:
30 | 15 | 20 | 20 | 15

At less than 1140, I’d like: 50 | 20 |30 (the 2 other widgets go below at 50/50)

Then (on iPad portrait mode): 40 | 30 | 30 (widtgets 4 + 5 go in a new row below)

On small screens, it should be two columns 50 / 50 and 3 rows to accommodate all 5 widgets.

[Tom]

That’s a very complicated layout. I want to improve the footer controls, but this would involve adding waaay too many options. I’ll try my best with some CSS:

@media (min-width: 1141px) {
    .active-footer-widgets-5 .footer-widget-1 {
        width: 30%;
    }

    .active-footer-widgets-5 .footer-widget-2 {
        width: 15%;
    }

    .active-footer-widgets-5 .footer-widget-3 {
        width: 20%;
    }

    .active-footer-widgets-5 .footer-widget-4 {
        width: 20%;
    }

    .active-footer-widgets-5 .footer-widget-5 {
        width: 15%;
    }
}

@media (max-width: 1140px) {
    .active-footer-widgets-5 .footer-widget-1 {
        width: 50%;
    }

    .active-footer-widgets-5 .footer-widget-2 {
        width: 20%;
    }

    .active-footer-widgets-5 .footer-widget-3 {
        width: 30%;
    }

    .active-footer-widgets-5 .footer-widget-4 {
        width: 50%;
        clear: left;
    }

    .active-footer-widgets-5 .footer-widget-5 {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .active-footer-widgets-5 .inside-footer-widgets > * {
        float: left;
    }

    .active-footer-widgets-5 .footer-widget-1 {
        width: 40%;
    }

    .active-footer-widgets-5 .footer-widget-2 {
        width: 30%;
    }

    .active-footer-widgets-5 .footer-widget-3 {
        width: 30%;
    }

    .active-footer-widgets-5 .footer-widget-4 {
        width: 100%;
        clear: both;
    }

    .active-footer-widgets-5 .footer-widget-5 {
        width: 100%;
    }
}

[v4ncouver]

Thanks Tom,
I tried a lot of different combinations but nothing is ideal.

Your styles behave like mine and I didn’t want to force anything with !important

The problem lays with the break points.
I think that it’s safe to assume that most users need to have at least two columns to hold the 5 widgets when their pages are viewed on an iPad or similar tablet.

Right now, it looks broken because of all the empty space.

I am almost considering to do this in Elementor and skip the widgets altogether because I see no working solution.

I appreciate the work you have posted here and hope that it will be of use for other people but it’s not a final solution for my page. I’ll keep digging. Thanks again.

[Tom]

Can you link me to what you have? I added this on my dev install (no !important needed) and it behaved as it should.

[v4ncouver]

Hi Tom,
bad timing. We are in the finishing stages of a new app and I can’t really find the time to take care of this now. I’ll revisit the issue sometime down the road. Thanks.

[Tom]

No problem!

[Author]

Posts