CSS – Changing width with purpose theme

  • Unknown's avatar
    dougelmagno · Member ·

    Hi i’m wanting to use the full width of the page as the purpose theme seems to be “narrow” regardless of whether the full width template has been selected. I have tried a few times to edit the css but don’t know enough about css to make it work. Is there anyone who knows how to do this for the “purpose” theme?

    Also does changing the width have any particular possible negative consequence?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, I see you have used the following CSS to widen the content area on Purpose. 

    .postarea.full {
    margin: 0 auto;
    max-width: 1140px;
    padding: 64px 0;
}

    As long as this is done properly, which the above does, there really aren’t any technical drawbacks or problems.

    I will mention though that in general it is best to keep text-based content at 500-750px in width for readability. It’s actually a bit more complex than that, but that is a good general rule. When text lines are too long, it is more difficult for the eye to scan back to the beginning of the next line and can sometimes land on the same line, or perhaps skip a line causing the reader to have hunt around to find the line they should be on.

  • Unknown's avatar
    dougelmagno · Member ·

    Thx a lot for the coding and for the advice. Reflecting on what you said about how the width can effect readability, I get your point as I was already finding it “wide” to read myself. Sorry to ask conflicting things but would you know the coding to alter the post area and the widget? According to the purpose theme, the pre-set width of these is: “the main column: 558 and the sidebar width is 270” but following your advice on readability I´m now thinking to put the main on 750 as I do want some more width, but not so much to effect readability, and keeping the sidebar on 270 but I’m not certain how to do that coding. Thx again for your help as very new to css editing.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, yes, we can do that. Purpose is a responsive designed theme to work with all screen/window widths, so the widths in this case are set in percentages. You can add the following to your custom CSS and then adjust the percentages. Add the same amount to the content area as you take away from the sidebar area to preserve spacing and flow. 

    /*content area width*/
.row .eleven {
    width: 68.75%;
}

/*sidebar area width*/
.row .five {
    width: 31.25%;
}
  • The topic ‘CSS – Changing width with purpose theme’ is closed to new replies.