[Resolved] Footer CSS not working

Home Forums Support Footer CSS not working

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #335407
    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?

    GeneratePress 1.3.48
    GP Premium 1.3
    #335409
    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.

    #335471
    Tom
    Lead Developer
    Lead Developer

    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%;
        }
    }
    #335475
    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.

    #335494
    Tom
    Lead Developer
    Lead Developer

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

    #335560
    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.

    #335581
    Tom
    Lead Developer
    Lead Developer
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.