Resizing content width in Reddle

  • Author
    Posts
  • #1364126

    byanushka
    Member

    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:

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

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

    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.

    #1364221

    byanushka
    Member

    Sorry – here is the CSS code that I put in

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

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

    #1364237

    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%;
    }
    #1364245

    byanushka
    Member

    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!

    #1364246

    byanushka
    Member
    #1364275

    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. :)

The topic ‘Resizing content width in Reddle’ is closed to new replies.