WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Page Structure Problem with Smaller Window Size (12 posts)

  1. kristen.ncl
    Member
    Posted 2 years ago #

    Hi, can someone tell me how to add a protective shell to my site so that the pages don't lose their structure when the window is resized?
    I've done a lot of searching on the web, but haven't found a solution. Words people seem to associate with this issue are: container, page, wrap, and rap.
    Here is a link to my site:
    Thank you!

  2. erikas_boy
    Member
    Posted 2 years ago #

    Krsten,
    your body doesn't have a width assigned in your .css, and your #page only has a max width. If you didn't make this theme, I'd guess the person wanted it to be a fluid layout rather than a fixed one. You can see which divs are shrinking when you re-siz the page using firebug, which will help. But if you simply downloaded this theme, you might be better served finding one that does what you want it to, rather than trying to "fix" this one into something I suspect it's not.
    Chris

  3. kristen.ncl
    Member
    Posted 2 years ago #

    Thanks for your advise. I am building a child theme off of Twenty Eleven. If I were to fix it, would I just assign a width to #body and #page? Or, instead of fixing it, do you have another free wordpress theme you would suggest for this?

  4. kristen.ncl
    Member
    Posted 2 years ago #

    Looks like this did the trick:
    body {
    padding: 0 2em;
    width: 1000px;
    }
    #page {
    margin: 2em auto;
    max-width: 1000px;
    width: 1000px;
    }
    Any forseable problems with this?

  5. kristen.ncl
    Member
    Posted 2 years ago #

    ... Oh, except now everything is to the Left instead of the center... How do I fix that?

  6. erikas_boy
    Member
    Posted 2 years ago #

    Kristen,
    Yeah, I would actually make the body 960px (which is roughly the size of the majority of displays), which means it will show without horizontal scroll bars for a lot of your users. Then for your #page div "#page {margin:0 auto;}" which will centre that div on the screen.
    C

  7. kristen.ncl
    Member
    Posted 2 years ago #

    So this is what I have now, but the page still isn't centered.
    body { padding: 0 2em;
    width: 960px;}

    #page { margin: 0 auto; }

  8. erikas_boy
    Member
    Posted 2 years ago #

    Looks centred to on my end. There are still scroll bars, but that is because you've padded the body horizontally 2 ems, and that pushes it's total width over 960px (and I'm looking on my little macbook, not my wide desktop). You shouldn't need to pad the body, rather use margins or padding for child divs (#page in this case, so padding). When you do this, you will need to subtract the padding you add from the total width of the div you want, so it will probably be easier to pad in pixels rather than ems.
    Does this make sense? It's late here and I just finished watching a film, I'm a bit bleary-eyed.
    C

  9. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    #page {
    margin-left:auto;
    margin-right:auto;
    }

    or add to body, depends on how your theme works. don't use em for horiz margin...remove extra spaces.

  10. kristen.ncl
    Member
    Posted 2 years ago #

    Hey, so I hear what you're saying. The padding needs to go. I just can't seem to get rid of it. I wound up getting everything centered by editing this:
    /* One column */
    .one-column #page { auto-width: 960px;}
    to this:
    /* One column */
    .one-column #page { width: 960px;}
    Could the padding be controlled by .one-column as well?
    I've tried getting rid of the 2em, changing it to 0em, changing it to auto, nothing has worked so far.

  11. erikas_boy
    Member
    Posted 2 years ago #

    Kristen,
    Are you using Firebug? It will tell you every .css rule that applies to a given element. Including ones that are cancelled out by other ones.
    C

  12. kristen.ncl
    Member
    Posted 2 years ago #

    C,
    I finally figured out how to use Firebug, and I got this resolved. Thanks so much for your help!

Topic Closed

This topic has been closed to new replies.

About this Topic