Footer with 4 columns, but separate sizing won´t work

Hi there,

probably easier to use some CSS instead of the PHP.

@media(min-width: 1025px) {
    .inside-footer-widgets > div {
        width: 30%;
    }
    .inside-footer-widgets > div:nth-of-type(2) {
        width: 10%;
    }
}

Thanks David, that did the job.
But now the footer is not centered but tilt to the left, although right padding is at 0 in Customizer?!
Please advise.

Thanks
Jan

Hi Jan,

As you can see in the below screenshot, there're 2 issues:
1. the 4th width is occupying more space than it needs.
2. there's a negative margin-left applied to the footer widgets area.
https://www.screencast.com/t/zuCG4hCCJ

You can try:
1. Re-arrange the width of widgets.
2. Remove the -40px margin-left CSS.
2. Add some left/right padding to the widget area at customizer > layout > footer.

Hi Ying,
thanks for your answer.
I get your point, but I cannot reproduce the -40 margin left. Where can I possibly change that?

Here is what I added as additional CSS:

.footer-widgets .widget-title {
color: #ffffff;
}

@media (min-width: 1025px) {
.site-content {
display: flex;
}

.inside-left-sidebar {
height: 100%;
}

.inside-left-sidebar aside:first-child {
position: -webkit-sticky;
position: sticky;
top: 90px; /*Adjust position */
}
}

#right-sidebar.sidebar .widget {
background-color: #ffffff;
color: #000;
content: #000000;

}

#right-sidebar .widget:first-child .widget-title,
#right-sidebar .widget:first-child a:not(.button) {
color: #000;
}

.site-description {
text-align: center;
}

@media(min-width: 1025px) {
.inside-footer-widgets > div {
width: 30%;
}
.inside-footer-widgets > div:nth-of-type(1) {
width: 20%;
}
.inside-footer-widgets > div:nth-of-type(2) {
width: 20%;
}
}

Nothing else has been touched. Where does this -40 come from?
Please advise.
BR
Jan

Hi there,

have you changed your requirements here? As i notice the footer layout is different. Let me know.

Hi David,
basically I did not change the requirements.
But to avoid all this tweaking and code here and there, I started from scratch with the footer.
And yes, the left section is still a bit too big, but in the end nobody will ever care. So I decided to leave it this way.
In case you have a small solo tweak for decreasing the left column, let me know ;-).

Thanks
Jan

Try this CSS:

@media(min-width: 1025px) {
    .inside-footer-widgets > div {
        width: 27.33%;
    }
    .inside-footer-widgets > div:nth-of-type(1) {
        width: 18%;
    }
}

You nailed it!
Thanks,
David

You're welcome