WordPress.org

1. blieurance
   Member
   Posted 3 months ago #

   Hello,

   Is it possible to change twenty-eleven to a fixed-width site?

   I've tried the advice found for other blogs on the forums, and it hasn't worked.

   One thing that did work but did not work when I updated my stylesheet in my child theme but DID work when I was using Firebug was to change
   

   body {
       padding: 0 2em;
   }
   
   to
   body {
       padding: 0 2em;
       width: 960px;
   }

   I have no idea why it didn't work outside of Firebug- I have tried it carefully many times and I know I am missing something.

   my site is http://www.lieurance.info

   Thank you!

   http://wordpress.org/extend/themes/twentyeleven/

2. blieurance
   Member
   Posted 3 months ago #

   Sorry - wasn't clear above - I found something that worked in Firebug but not when I tried to actually apply it to my site using the child theme. Thanks!

3. alchymyth
   The Sweeper
   Posted 3 months ago #

   ?

   /* To make the website fixed-width*/
   
   #boxer {
   margin: 0 auto;
   width: 960px;
   }

   where is that css id #boxer used in the templates?

   using #page might work - however, you will still need to overwrite the 'responsive structure' section of the stylesheet.

   (or alternatively copy the full parent css into the beginning of style.css of the child theme, remove the @import code and delete the 'responsive structure' section)

   your style.css also has a missing } here after center;:

   line-height: 2.2em;
       padding: 2.2em 0.5em;
       text-align: center;
   
   /*To center the middle pict

   this would stop the last style from getting applied.

   if you use the forum search, you might find more answers to the same problem.

4. blieurance
   Member
   Posted 3 months ago #

   Dear alchymyth,

   Thank you! You just saved me so much trouble - and I feel a little foolish. Things were not working because of that missing } and I didn't know the effect that would have, so I didn't think to look for it. I'm new!

   In cae any one else is looking - in the forums, I found several different options, and this one worked well:
   

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

   Again, thank you! Thank you!

5. kristen.ncl
   Member
   Posted 3 weeks ago #

   This is what worked for me:
   

   .one-column #page {
   	margin-top: 0px;
   	margin-bottom: 0px;
   	max-width: 1000px;
   	min-width: 930px;
   }
   
   @media (max-width: 800px) {}
   
   #main #content {
   	margin: 0 0;
   	width: 100%;
   }

Reply

You must log in to post.