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

• 

  richwoodward · Member · Jun 20, 2011 at 9:10 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  thesacredpath · Member · Jun 20, 2011 at 11:06 pm

  • Copy link

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

• 

  richwoodward · Member · Jun 21, 2011 at 6:36 am

  • Copy link

  sorry — http://carvingnature.wordpress.com/

• 

  thesacredpath · Member · Jun 21, 2011 at 7:11 am

  • Copy link

  1. Fixed width

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

  2. Searchform

  #searchform {
  display: none;
  }

• 

  richwoodward · Member · Jun 21, 2011 at 7:43 am

  • Copy link

  thanks!

• 

  thesacredpath · Member · Jun 21, 2011 at 7:56 am

  • Copy link

  You are welcome.

• 

  devblog · Member · Jun 21, 2011 at 5:59 pm

  • Copy link

  1. Fixed width

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

  Why not just this?

  #page {
  width: 690px;
  }

• 

  thesacredpath · Member · Jun 22, 2011 at 4:06 am

  • Copy link

  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.

• 

  richwoodward · Member · Jun 22, 2011 at 9:49 am

  • Copy link

  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.

• 

  thesacredpath · Member · Jun 22, 2011 at 10:23 am

  • Copy link

  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.

• 

  devblog · Member · Jun 22, 2011 at 6:24 pm

  • Copy link

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

• 

  thesacredpath · Member · Jun 22, 2011 at 7:09 pm

  • Copy link

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

• 

  devblog · Member · Jun 23, 2011 at 3:54 am

  • Copy link

  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;}

• 

  devblog · Member · Jun 23, 2011 at 3:58 am

  • Copy link

  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.

• 

  thesacredpath · Member · Jun 23, 2011 at 4:59 am

  • Copy link

  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).

• 

  richwoodward · Member · Jun 23, 2011 at 10:13 am

  • Copy link

  That works perfectly — you guys are awesome!