How can I convert Twenty Eleven to fixed width with CSS?

  • Author
    Posts
  • #636792

    richwoodward
    Member

    1. Is there any way to use the Custom Design editor to convert the twenty eleven theme to a fixed width theme?

    2. Also, is there any way to remove the search bar from the menu in my page?

    The blog I need help with is carvingnature.wordpress.com.

    #636967

    Yes on both counts, but we need a link to the site you are talking about.

    #637033

    richwoodward
    Member
    #637034

    1. Fixed width

    #page {
    max-width: 690px;
    min-width: 690px;
    }

    2. Searchform

    #searchform {
    display: none;
    }
    #637035

    richwoodward
    Member

    thanks!

    #637037

    You are welcome.

    #637066

    devblog
    Member

    1. Fixed width

    #page {
    max-width: 690px;
    min-width: 690px;
    }

    Why not just this?

    #page {
    width: 690px;
    }
    #637087

    I tried that in Firebug and it didn’t seem to override the max-width, but I tried it again just now and it did. Perhaps I made a typo or something the first time, or perhaps Firebug was on a coffee break.

    Thanks Devblog.

    #637088

    richwoodward
    Member

    Ok, so the code provided seems to have had the following effect: the header and menu are now fixed width. BUT the main content on the page still varies depending on the size of the window (that is, if I make the window smaller, the pictures and text wrap differently to fit the window).

    Is there anyway to make everything on the page static? I thought that making the page fixed width would have this result, but it doesn’t do everything I wanted.

    #637089

    Strange. I’ve been playing with it now for a while and cannot get it to stop doing that. Hopefully devblog will drop back by with the solution. It is after midnight here and I’m on my way to dreamland.

    #637096

    devblog
    Member

    I’ll take a look at this as soon as I get home

    #637097

    @devblog, thanks. It was late for me and left me scratching my head.

    #637102

    devblog
    Member

    Try this:

    #page {
    clear: both;
    max-width: none !important;
    overflow: hidden;
    padding: 0;
    width: 690px !important;
    }
    
    #primary {overflow: hidden;}
    
    .entry-content {width: 100%; clear: both; overflow: hidden;}
    
    .alignright{float: right;}
    
    .alignleft{float: left;}
    #637103

    devblog
    Member

    I tried that in Firebug and it didn’t seem to override the max-width, but I tried it again just now and it did.

    That’s one of the reasons I don’t like using Firebug for this kind of things is just not as reliable as Web Developer is. I use Firebug for debugging AJAX and JavaScript stuff.

    #637104

    I’ve got to get better acquainted with Web Developer. I’ve had it installed for eons, but never sat down and figured out how to use it. Firebug is just so quick and easy (most of the time).

    #637105

    richwoodward
    Member

    That works perfectly — you guys are awesome!

The topic ‘How can I convert Twenty Eleven to fixed width with CSS?’ is closed to new replies.