Twenty Eleven Spacing Issues when Browser Width Reduced

  • Resolved PGrizz

    (@pgrizz)


    12 years, 4 months 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: https://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.

Viewing 2 replies - 1 through 2 (of 2 total)

  • 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;
		etc.
	}
}

    Thread Starter PGrizz

    (@pgrizz)

    Thanks Drew, that did the trick. ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Twenty Eleven Spacing Issues when Browser Width Reduced’ is closed to new replies.