[Resolved] Height of last div in right sidebar to match the content column

[Anil]

Hi

Please advice

how to do height of last div in right sidebar to match the content column in desktop view, so it looks nice….

Regards.

[Anil]

Can we have a flexible height of last div in right sidebar to match the height of main content ?

[Tom]

Hi there,

Try this CSS:

.site-content {
    display: flex;
}

.inside-right-sidebar {
    display: flex;
    flex-direction: column;
    height: calc(100% - 40px);
}

.inside-right-sidebar > aside:last-child {
    flex-grow: 1;
}

[Anil]

Thanks Tom, it worked with media quary:

@media (min-width: 769px) {

    .site-content {
    	display: flex;
	}

	.inside-right-sidebar {
    	display: flex;
    	flex-direction: column;
    	height: calc(100% - 40px);
	}

	.inside-right-sidebar > aside:last-child {
	    flex-grow: 1;
	}

}

[Anil]

Also, can you please advise to have same grid space between footer widget 1 and footer widget 2…

[Leo]

Something like this?
https://generatepress.com/forums/topic/separated-footer-container/

[Anil]

Thanks Leo, it works with slight tweak

@media (min-width: 769px) {
    #footer-widgets {
        padding: 0;
        background-color: transparent;
    }

    .site-footer .footer-widgets-container .inside-footer-widgets {
        margin: 0;
    }

    .site-footer .footer-widgets-container .inner-padding {
        padding: 0;
    }

    .inside-footer-widgets>div {
        width: calc(50% - 10px);
    }

    .inside-footer-widgets>div:first-child {
        margin-right: 10px;
        padding: 20px;
        background-color: #fff;
    }

    .inside-footer-widgets>div:last-child {
        margin-left: 10px;
        padding: 20px;
        background-color: #fff;
    }
}

[Anil]

Also can you please advise to have grid space between footer widget 1 and footer widget 2 when width is less than 769 because at width 768 footer widgets re-aligned in a column….

[Leo]

Have you figured it out?

I see a space between them:
https://www.screencast.com/t/yAGgvuifB4cF

[Anil]

Yes Leo, it is working now with following css:

@media (max-width: 768px) {
    #footer-widgets {
        padding: 0;
        background-color: transparent;
    }

    .site-footer .footer-widgets-container .inside-footer-widgets {
        margin: 0;
    }

    .site-footer .footer-widgets-container .inner-padding {
        padding: 0;
    }

    .inside-footer-widgets>div:first-child {
        margin-bottom: 10px;
        padding: 20px;
        background-color: #fff;
    }

    .inside-footer-widgets>div:last-child {
        padding: 20px;
        background-color: #fff;
    }
}

@media (min-width: 769px) {
    #footer-widgets {
        padding: 0;
        background-color: transparent;
    }

    .site-footer .footer-widgets-container .inside-footer-widgets {
        margin: 0;
    }

    .site-footer .footer-widgets-container .inner-padding {
        padding: 0;
    }

    .inside-footer-widgets>div {
        width: calc(50% - 5px);
    }

    .inside-footer-widgets>div:first-child {
        margin-right: 5px;
        padding: 20px;
        background-color: #fff;
    }

    .inside-footer-widgets>div:last-child {
        margin-left: 5px;
        padding: 20px;
        background-color: #fff;
    }
}

Only issue remaining is footer widget height…. i think display:flex is creating it ….

Can you suggest some tweak….

[Anil]

I checked that following css is to be tweaked:

@media (min-width: 769px) {
    #footer-widgets {
        padding: 0;
        background-color: transparent;
    }

    .site-footer .footer-widgets-container .inside-footer-widgets {
        margin: 0;
    }

    .site-footer .footer-widgets-container .inner-padding {
        padding: 0;
    }

    .inside-footer-widgets>div {
        width: calc(50% - 5px);
    }

    .inside-footer-widgets>div:first-child {
        margin-right: 5px;
        padding: 20px;
        background-color: #fff;
    }

    .inside-footer-widgets>div:last-child {
        margin-left: 5px;
        padding: 20px;
        background-color: #fff;
    }
}

[David]

Hi there,

by making the footer container a flex should resolve that – something like this:

.inside-footer-widgets {
    display: flex;
}

You will need to include within your media queries for desktop only.

[Anil]

Thanks David, it worked.

My observation: “Tom and David are experts in css”

Regards & Bye.

[David]

Glad we could be of help.

[Author]

Posts