Sridhar Katakam

Genesis and WordPress Tutorials

Equal height Content and Sidebar in Genesis Sample 2.6.0

by 1 Comment

Looking to set the same height for content and sidebar in Genesis? Flexbox to the rescue.

This tutorial provides the code change to replace floats with Flexbox in Genesis Sample 2.6.0’s CSS for equal height (determined by whichever is taller) content and sidebar columns.

In the 960px min-width media query inside style.css, replace

/* Content
--------------------------------------------- */

.content {
    float: left;
    width: 65%;
}

.sidebar-content .content {
    float: right;
}

.full-width-content .content,
.landing-page .content {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/* Sidebar
--------------------------------------------- */

.sidebar {
    float: right;
    width: 30%;
}

.sidebar-content .sidebar {
    float: left;
}

with

/* Content
--------------------------------------------- */

.content-sidebar-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.content {
    width: 65%;
}

.full-width-content .content {
    width: 100%;
}

.sidebar-content .sidebar {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

.sidebar-content .content {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}

/* Sidebar
--------------------------------------------- */

.sidebar {
    width: 30%;
}
>