WordPress.org

Ready to get started?Download WordPress

Forums

Make page width wider using body_class (11 posts)

  1. melissaaggie98@gmail.com
    Member
    Posted 2 years ago #

    Hello,

    I have desperately been trying to get just this one page wider because my blog is 900 px wide, but the BlogFrog javascript requires 960 px to be displayed properly:

    http://www.mommylivingthelifeofriley.com/blogfrog-community/

    I have the following inserted for the body tag in my header.php file:

    <body <?php body_class(); ?>>

    But for the life of me, I can't figure out how to style my css. I think I need to use the following, .page-id-15139 { width: 960px; }
    but I can't figure out what specific part of my css is controlling the width of my post.

    Can anyone take a look at my code and see if they can shed some light on the situation? I've been racking my brain on this one, with no results whatsoever. Thanks so much!

  2. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    you need to target any styles with a fixed width;

    this might be it:

    .page-id-15139 .main,
    .page-id-15139 .container,
    .page-id-15139 .top {
    width:960px;
    }

    (not widely tested)

  3. melissaaggie98@gmail.com
    Member
    Posted 2 years ago #

    Thanks alchymyth for the try, but that didn't seem to work either. I'm thoroughly stumped at this point. I appreciate the help though!

  4. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    sometimes, changes to the css don't get visible immediately in the browser;
    you might need to 'reload' the page or press 'CTRL F5' to clear the browser cache.

    try again to add the suggested styles to style.css; then do the above.

    hopefully you will be able to see some changes, although it probably will leave the header image width unchanged.

    it could be a good idea, to leave any suggested changes in the code (even if they don't seem to work) until someone in the forum had a chance to check the effects.

  5. melissaaggie98@gmail.com
    Member
    Posted 2 years ago #

    Oh, I'm so sorry that I removed the code. I went ahead and put it back in my style.css file so that someone from the forum could check it.

    Actually, all I'm looking for is the content itself to be wider, not the header or anything else, so if that's the easier thing to accomplish, then that works out great.

    Thanks again for your help with this, alchymyth.

  6. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    the problem seems to be that the changed/added css code does not appear in your site;
    i just checked and there is no style starting with .page-id- in any of the stylesheets of your linked page.

    btw: i can't view your site in IE7; it always points to a 'mobile' view.

  7. melissaaggie98@gmail.com
    Member
    Posted 2 years ago #

    Uh-oh! Is it possible that I'm adding it to the wrong place in my style.css file? Is there a specific place that this code should go?

    Also, I am using WPTouch for my mobile view and had no idea that this was happening in IE7. Is there any suggestions you have on how I can fix this problem? Thanks so much for letting me know that this was happening.

  8. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    Is there a specific place that this code should go?

    no - just into style.css of your current theme.

    Also, I am using WPTouch for my mobile view and had no idea that this was happening in IE7. Is there any suggestions you have on how I can fix this problem?

    i have no idea - maybe best to start a new topic for this problem.

  9. melissaaggie98@gmail.com
    Member
    Posted 2 years ago #

    Hmmm...that's weird, because I inserted this code into the top portion of my style.css file. Is there anything else I can try in order to resize this post or to see why the code isn't showing up?

  10. melissaaggie98@gmail.com
    Member
    Posted 2 years ago #

    OOOHHH! I just thought of something! My style.css file is being served by my CDN at WPCDN. That must be why the code isn't showing up. I'll ask them to purge my files there and we'll see what happens.

  11. melissaaggie98@gmail.com
    Member
    Posted 2 years ago #

    Thanks...now that the CDN was flushed, this code worked perfectly!

    .page-id-15139 .main,
    .page-id-15139 .container {
    width:960px;
    }

    Thanks again for all your help! :)

Topic Closed

This topic has been closed to new replies.

About this Topic