Widen content and sidebar area of Affinity

  • Unknown's avatar
    kelseybaross · Member ·

    Hello!

    I recently switched over to the Affinity theme and am currently tweaking the design with CSS. (I switched from Edin, if that matters).

    I would love to make the content area of both the posts and sidebar wider — they are both too skinny for my tastes. I don’t want the content to be edge to edge on the screen, of course, but preferably more spacious like in Hemingway Rewritten (https://hemingwayrewrittendemo.wordpress.com)

    Is this possible through CSS, or is the content width set with this theme? If there is CSS that can adjust these areas, hopefully it won’t negatively impact mobile view!

    Thanks so much! Let me know if I’m unclear and I’ll try to better articulate my question.

    Best,
    Kelsey

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

  • Unknown's avatar
    carladoria · Member ·

    Hi there,
    Currently the width of your content is set to 75%. If you change this to 100% you’ll get a wider content without affecting the rest of your site (take into account that you can get it even wider 120% and so on but other sections like the widget areas could be affected)
    The CSS is currently using Media queries, this means that it should adapt to most mobile devices in general. 

    @media screen and (min-width: 58em)
.entry-content {
    width: 100%;
    float: right;
    margin: auto;
}
  • Unknown's avatar
    kelseybaross · Member ·

    Hi carladoria,

    Thanks so much for responding, I really appreciate it. I tried the CSS you provided and I didn’t notice any changes.

    I noticed that the theme’s post content width was at 75% when I was exploring the style sheet before. This is because the theme’s entry meta in the upper left of the post cuts into the post content area 21%. When I had previously tried changing the entry content to 100%, it was a great width for the post itself, but it moved below the entry meta — leaving a big blank space — rather than it being side by side as it is now. What I’d love is to shrink the left and right margins on the blog, so the content and sidebar areas can spread out a little more.

    Does any CSS come to mind for this? Sorry if I’m not explaining it correctly! I haven’t caught on to all the terms yet, but I’m learning! :)

    Thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, add the following to your custom CSS and then increase the max-width value. 

    .site-content {
    max-width: 1068px;
    width: 100%;
}

    Note that since the metadata on the left, the post content itself, and the sidebar widths are all set as a percentage, they will all grow in width when you change the max-width in the above.

  • Unknown's avatar
    kelseybaross · Member ·

    Hi thesacredpath,

    Thank you so much! That’s what I needed. I’m playing around the max width and percentage now.

    Appreciate the help!!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Widen content and sidebar area of Affinity’ is closed to new replies.