0

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.

  • You may need to modify the values for the CSS Media Queries. If you increase one column, you may need to decrease the value for the other column by the same amount. – Brad Dalton Feb 9 '15 at 17:31
4

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.