WordPress.org

Ready to get started?Download WordPress

Forums

Hueman
[resolved] Content Width Fix (9 posts)

  1. mirilailai
    Member
    Posted 7 months ago #

    Greetings,
    First I want to thank you for the great theme.
    I'm using 3 columns layout and want to expand the content width. If I reduce the primary sidebar width, an empty space is left between the sidebar and the content. My question is how to remove that empty space so my content move more to the left and be centered. Maybe it has something to do with left padding but I don't know where to check in the stylesheet.

    Thank you,
    Stamen Yanev.

  2. Alexander Agnarson
    Member
    Theme Author

    Posted 7 months ago #

    Hey there,

    The best way to expand content width, is to expand the website max-width in Theme Options > Styling. But I guess you mean for lower resolution screens as well, when the website fills the whole screen?

    The sidebar CSS "logic" involves quite a bit and can be tricky to modify.

    The spacing from content to the sidebar sits on main-inner, so you'd do:

    .col-3cm .main-inner { padding-left: 260px; }

    If you've sorted the rest already.

    The complete fix for it would be something like:

    .col-3cm .main-inner { padding-left: 260px; background-position: -80px 0; }
    .col-3cm .s1 { margin-left: -260px; }
    .s1 { width: 260px; }

    This will give you two equally wide sidebars. However, for the mobile view, the primary will still be 300px when expanded from a collapsed state. And to modify that, we need to also add...

    @media only screen and (min-width: 479px) and (max-width: 960px) {
    .s1-expand .s1 { width: 260px; }
    .s1-expand .s1 .sidebar-content,
    .s1-expand .s1 .post-nav { min-width: 260px; }
    }

    To test it you can just pop the entire thing in the Custom CSS field in Theme Options > Styling and see.

    .col-3cm .main-inner { padding-left: 260px; background-position: -80px 0; }
    .col-3cm .s1 { margin-left: -260px; }
    .s1 { width: 260px; }
    @media only screen and (min-width: 479px) and (max-width: 960px) {
    .s1-expand .s1 { width: 260px; }
    .s1-expand .s1 .sidebar-content,
    .s1-expand .s1 .post-nav { min-width: 260px; }
    }

    Hope that points you in the right direction with the customizations you want to do.

  3. mirilailai
    Member
    Posted 7 months ago #

    Edited:

    I just saw your addition to the post, sorry. It worked perfectly. Thank you very much for the fast and perfect response.

  4. mirilailai
    Member
    Posted 7 months ago #

    Thread Resolved.

  5. mcpank
    Member
    Posted 5 months ago #

    Hi Alex,
    even if you heard it a lot already: 'hueman' is one of the best WP-Themes I've ever seen so far and much better than a lot of the ones you have to pay for, too! REALLY great job you did there! :)

    I'm posting in this thread, because my problem is (nearly) solved by it but for one issue, I can't figure out: the website I designed with your template has also 260px Sidebars on both sides and it looks fine in full resolution. But when it comes to the collapsing, the content of the left sidebar changes to the collapsed state (arrows in the head section and all content dissapears) but it still remains in 260px width. If you draw the browser window smaller, while looking at it, you'll know what I mean. I also changed the size of the 's-right-s1.png' to 260px, didn't helped either.
    The right sidebar works just fine!

    The only code in my 'custom.css' is the one from you above. Can you take a look at the site? Maybe you already know the solution, when you see it:
    http://www.benehmensberatung.com/wordpress/
    (and please don't mind the content of the page - it's still 'work in progress' ;) )

    THANK YOU!

  6. Dyret
    Member
    Posted 5 months ago #

    Hi Alex. Really awesome theme, but i have the exact same problem as mcpank explains in the post above, is their something in the code we are missing? Hope it can be fixed, keep up the good work

  7. esmi
    Forum Moderator
    Posted 5 months ago #

    @Dyret: If you require assistance then, as per the Forum Welcome, please post your own topic. This 2 month old topic has been resolved.

  8. mcpank
    Member
    Posted 5 months ago #

    Thank you esmi!
    And sorry - didn't know, that a topic didn't get any more replys after it's marked as solved.
    I just posted my own one:
    http://wordpress.org/support/topic/responsive-design-problem-with-2-equal-width-sidebars?replies=1

    @Dryet: feel free to repeat your reply in my new post. I guess it's always better, when you don't stand alone with a problem ;)

  9. Alexander Agnarson
    Member
    Theme Author

    Posted 5 months ago #

    Try wrapping the first css part in:
    @media only screen and (min-width: 961px) { }

    Like this:

    @media only screen and (min-width: 961px) {
    	.col-3cm .main-inner { padding-left: 260px; background-position: -80px 0; }
    	.col-3cm .s1 { margin-left: -260px; }
    	.s1 { width: 260px; }
    }
    @media only screen and (min-width: 479px) and (max-width: 960px) {
    	.s1-expand .s1 { width: 260px; }
    	.s1-expand .s1 .sidebar-content,
    	.s1-expand .s1 .post-nav { min-width: 260px; }
    }

Reply

You must log in to post.

About this Theme

About this Topic