Spun theme trouble widening post and page content areas.

  • sheilabryanna · Member ·

    I’ve tried numerous codes to widen the post area and page area.

    I have a site border. When I widen the post area, half of the right border disappears on my computer screen, but when I shrink the window the border is in tact all around.

    On the About page the right border is there, but the text goes right up next to the border. Like on the post area when I shrink the window the border is in tack all around.

    Please help!

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

  • hallluke · Member ·

    You can solve the problem by removing the last 4 declarations you have in your existing custom CSS – the bit that looks like this:

    .single .content-area {width: 100%;}
.single .hentry {width: 100%;}
.page .content-area {width: 100%;}
.page .hentry {width: 100%;}

    and replacing it with something like this:

    .site {width:800px;}
.single .hentry, .error404 .hentry, .page .hentry, .search-no-results .no-results {width: 700px;}

    It looks like you were expanding some of the content boxes without expanding the sections that they live inside, hopefully this will work, if not just let me know.

  • sheilabryanna · Member ·

    Hi Luke. I did what you suggested. With the site width at 800px and 700px for the rest of the code, it made the site too narrow.

    I changed 800px to 1000px and the 700px to 900px and it expanded the site but not the content areas.

    I would like to have the content areas wider but still centered within the 1000px site.

    How would I do that?

  • sheilabryanna · Member ·

    I put the site back to 800 and 700, but the responsive element is messed up when I shrink the window.

  • hallluke · Member ·

    Oops, sorry! Try wrapping the code in a media query so it only affects screens of a certain size like so:

    @media screen and (min-width: 1000px) {
	.single .hentry, .error404 .hentry, .page .hentry, .search-no-results .no-results {width: 700px;}
	.site{width:800px;}
}
  • sheilabryanna · Member ·

    I must be doing something wrong.. can’t get it to work. I’m not clear on the last code you gave.

  • hallluke · Member ·

    If you replace the code I suggested the first time with the more recent example it should affect the widths only when the screen size is larger, for tablets or smartphones it will default to the standard theme proportions.

  • designsimply · Member ·

    I reviewed http://silverframes.wordpress.com/ and http://silverframes.wordpress.com/about/ and I found that you seem to have solved the problem you were working on by maxing out the width for the #main element like this:

    #main {
	max-width: 1000%;

    The posts and pages look great. Note that 1000% might be a typo but still seems to work okay, using 100% is more correct and will work just as well.

  • The topic ‘Spun theme trouble widening post and page content areas.’ is closed to new replies.