Twenty Fifteen : Wider right column for the content

While I think they really hit it out of the ball park (so to speak) with Twenty-Fifteen, this has driven me nuts for a long time–I want yet more room for content.

I’ve gotten this (via a wider content area, as you want) by futzing with css percents a lot. Your mileage may vary. Here’s a paste of the css section where I changed the numbers. I also removed the box effect and made some things transparent (I don’t even know if they “need” to be–as I said, this is all futzing–but it worked) for some things–otherwise it looked wrong with overlapping lines.

@media screen and (min-width: 59.6875em) {
body:before {
    background-color: #fff;
    content: "";
    display: block;
    height: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 23.4118%;
    z-index: 0; /* Fixes flashing bug with scrolling on Safari */
    background-color: transparent;
}

.site {
    margin: 0 auto;
    max-width: 1650px;
}

.sidebar {
    float: left;
    margin-right: -100%;
    max-width: 313px;
    position: relative;
    width: 23.4118%;
    background-color: transparent;
}

.secondary {
    background-color: transparent;
    box-shadow: none;
    display: block;
    margin: 0;
    padding: 0;
}

.site-main {
    padding: 1.75% 0;
    background-color: transparent;
}

.site-content {
    display: block;
    float: left;
    margin-left: 13%;
    width: 87%;
    background-color: transparent;
}

body {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.6;
    background-color: transparent;
}

Also, I recommend breaking this into a child theme if you use it, so that theme updates don’t break it.

Related Posts: