Need help? Check out our Support site, then


Resizing content width in Reddle

  1. Hi,

    I found that when I first loaded Reddle, the width of the sidebar was too wide for my liking, and I wanted to increase the width of the main content.

    http://anushkatay.co.uk/blog

    I have put this in the CSS code:
    <br /> #secondary {<br /> max-width:25%;<br /> margin-right:20px;<br /> }</p> <p>#content {<br /> max-width:75%;<br /> margin-right:0;<br /> }<br />

    However whilst the sidebar has moved over to the right a little, the content within the two sections is still equally narrow, and there is a lot of white space around, framing both the main content and the sidebar.
    How do I decrease this white margin and allow my text and images to spread across?

    Thanks
    Anushka

    The blog I need help with is anushkatay.co.uk.

  2. Sorry - here is the CSS code that I put in

    #secondary {
    max-width: 25%;
    margin-right: 20px;
    }

    #content {
    max-width: 75%;
    margin-right: 0;
    }

  3. Hi Anushka, Reddle is a little different in that the width for the content area is set with margins instead of widths. I kept your 25% width for the secondary and then ended up at 35% for the primary content visually. Remove the #secondary and #content rules you have now and add the following and see what you think.

    #primary #content {
    margin-left: 5%;
    margin-right: 35%;
    }
    
    #main .widget-area {
    margin-right: 5%;
    width: 25%;
    }
  4. Thanks for your reply!
    The spacing on the site now looks much better!
    However, on the blog page, the pink circular icon for the blog post date and the green speech bubble icon for comments are now very far away from the blog posts.
    Previously, the pink circular icon on the left aligned perfectly with the line separating the green page background and the white posts background.
    How can they be moved back across?

    Hope this makes sense!

  5. I'm not sure whether this will do what you want, but give it a try:

    .entry-title,
    .entry-meta,
    .comments-link {
    	display: inline;
    	position: relative;
    }
    .comments-link {
    	margin-left: -2em;
    }
    .secondary {
    	position: relative;
    }
    .secondary footer {
    	position: static;
    }
    .secondary footer .permalink {
    	position: absolute;
    	left: -40px;
    	top: -10px;
    }

    This one's a little tricky. :)

Topic Closed

This topic has been closed to new replies.

About this Topic