Twenty Eleven Theme: Disable Responsive Structure

• 

  erichagarty · Member · Dec 19, 2011 at 11:18 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I’m hoping to completely disable the responsive structure for my site: http://www.richfitzgerald.com. I’ve got the CSS updgrade, and the site is based on the Twenty Eleven theme.

  Thanks,
  Eric

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Dec 20, 2011 at 3:29 am

  • Copy link

  I’ll have to work on this a little. The last time I attempted this with twenty eleven I got to a certain point and could not get the last bit to stay a fixed width.

• 

  thesacredpath · Member · Dec 20, 2011 at 3:46 am

  • Copy link

  Add and/or modify the current selectors in your CSS using the following. I think this actually does it.

  .hentry {
  width: 750px !important;
  }
  
  .right-sidebar #secondary {
  float: right !important;
  width: 250px !important;
  }
  
  .right-sidebar #content {
  margin: 0 !important;
  width: 750px !important;
  }

• 

  erichagarty · Member · Dec 20, 2011 at 5:39 am

  • Copy link

  Thanks for the help. I added that in my CSS, and it fixed the primary content. However, the sidebar now appears below the primary content, floating on the right. Looks like it’s got 10% padding on the right or so, and I’m having trouble locating where that’s coming from.

• 

  thesacredpath · Member · Dec 20, 2011 at 6:06 am

  • Copy link

  In the following in your CSS, add the !important attribute to the left and right margin declarations.

  .right-sidebar #secondary {
  float: right !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 250px !important;
  }

  It’s amazing how many hammers you have to use to get a responsive width theme to stay fixed.

• 

  erichagarty · Member · Dec 20, 2011 at 6:15 am

  • Copy link

  That did it. I also fixed the footer by adding the !important tag to the #supplementary.three .widget-area characteristics. Just out of curiosity, what does the “!important” tag do in the back-end? I’m assuming it overrides any other CSS modifications?

• 

  thesacredpath · Member · Dec 20, 2011 at 6:18 am

  • Copy link

  It tells the browser, when it is loading the CSS that that particular declaration should override all other like declarations in the various CSS files. The only thing it will not override is an inline CSS declaration in the markup (XHTML). That will always take precedence over all declarations in CSS files.

• 

  erichagarty · Member · Dec 20, 2011 at 6:19 am

  • Copy link

  Got it. Thanks again for everything throughout this process, you’ve been extremely helpful. Best of wishes!

• 

  thesacredpath · Member · Dec 20, 2011 at 6:21 am

  • Copy link

  You are welcome and best wishes to you too.