[resolved] Twenty Eleven Spacing Issues when Browser Width Reduced (3 posts)

  1. PGrizz
    Posted 2 years ago #

    I guess this is a new feature with TwentyEleven? Or Maybe I changed something that messed everything up. But it seems like the theme is trying to resize elastically when the browser window's width is reduced.

    You can see in the example here: http://nitruc.com/GTest/?page_id=2

    Take your browser and make the width smaller, then watch as the big green box gets shifted around, along with the spacing of the page, and the font-size of the page's title...

    What's going on here?? I just want everything to stay at the regular 1000px width, no matter what the browser size.

  2. Drew Jaynes
    4.2 Release Lead
    Posted 2 years ago #

    Hi PGrizz,

    What you're seeing is called responsive design, which is a built-in, intentional feature of Twenty Eleven. The content shifts are controlled by declarations in the stylesheet called media queries. Media queries allow your site to be viewable on a variety of devices with a somewhat-tailored design based on the screen width.

    I suppose if you wanted to enforce the base-width of the theme, you could open up the style.css file and remove all of the @media declaration blocks. Usually they follow a format similar to this:

    @media .... {
    	.some-class {
    		someproperty: value;
  3. PGrizz
    Posted 2 years ago #

    Thanks Drew, that did the trick. :)

Topic Closed

This topic has been closed to new replies.

About this Topic