Twenty Fifteen : Wider right column for the content

Question

I'm using the theme Twenty Fifteen on my offline site. I want to make a wider column for the content (the right column highlighted in blue here). I don't want to have a smaller sidebar.

I tried to change the value of the "width" property for the class "site-content" but it broke the responsive "functionnality".

Twenty Fifteen's style.css :

/* Right column */
.site-content {
   display: block;
    float: left;
    margin-left: 29.4118%;
   width: 80%; /* Original value: 70.5882%  */
}

Thanks for your help.

Answer 1

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.