Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #16040


    I’d like to know the proper way to increase the sidebar width so it can contain banners that are 300px wide and still look good in all browsers, including mobile devices (responsive mode). I understand that the content area needs to be narrower as well, but haven’t managed to do it without breaking the layout.

    Also, how to add a divider between blog posts in the loop?



    Hi dblomster,

    The big issue you are going to have if you NEED to have 300px width sidebars is the whole thing is part of a grid system where the sidebars are actually in a 290px wide grid of 4 columns and the content is 8 columns making up a total of 12. If you start to mess with that it tends to break the whole layout and all the fixes that rely on the grid. You would have a much easier time just using sidebar content that is 290px wide and then removing the 30 pixel padding and margin on the sidebar. Or, using content that is 260px wide and not editing the dimensions at all but that is a bit more restrictive.

    Really, we wouldn’t be able to walk you through modifying the layout that extensively and still being able to keep everything responsive and have no issues cross browser.

    You can modify the loop for the blog in includes>loop-index.php. So perhaps right after:

    </div><!--end post-entry-->

    Depending on what you want to do and where you want it to be included on each post.





    Thanks for your answer.

    The reason why I NEED to use 300 px banners is simply because that’s what many advertisers use these days. See for yourself at – 250 px was retired in Feb 2011.

    When I integrate a ready-made HTML template with a CMS like CMS Made Simple I usually take advantage of the existing column/grid system to create a sidebar with a suitable width. Maybe this is possible to achieve with WP as well without breaking the overall layout – any ideas?

    Anyway, I hope you’ll make place for these kind of banners in future theme releases as other providers already have.

    Best regards,




    Maybe you can try a simple solution like this, add this on your custom.css

    .container .eight.units {
    width: 600px;

    .container .sidebar.four.units {
    width: 300px;

    Now, I’m sure you are familiar with media queries. Try to experiment.



Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Widen sidebar to contain 300px banners and divider between posts’ is closed to new replies.