TwentyEleven Browser Resize

  • Hi,

    When using the Twentyeleven theme at https://btrim.net/kev it appears all in line with a suitable browser width but as soon as the browser is made smaller, things start to move and the sidebar then goes to the bottom of the page.

    I think it’s because the theme is built on %’s rather than px’s… is that right? Is there any way to stop this happening?

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

  • That’s part of the reason, also, if you scroll down to the bottom of 2011 style.css, you will see all the definitions for a responsive structure. That causes 2011 to adapt to the browser size, useful for accomodating movbile screens, etc.

    If you want to undo that behaviour (think long and hard about that…. it’s very useful) you would first need to make a child theme to contain your edits. and then 1 simple edit here:

    /* =Structure
----------------------------------------------- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}

    you see that max-width rule? That allows for flexibility. It tells WP that the theme can be any size, up to 1000px.

    If you change max-width: 1000px to just read width: 1000px, the theme will be set at 1000px, and will no longer be flexible, and all the % based ruyles, and media queries will not come in to play

    and all the % based ruyles, and media queries will not come in to play

    unfortunately, there are still some rules in the responsive structure, that will alter the design (a bit) for narrower browsers.
    you might need to add further styles to style.css of your child theme https://codex.www.ads-software.com/Child_Themes
    (it is not recommended to edit Twenty Eleven directly, as an unedited default theme is important in case of problems; a child theme also helps to keep customisations during an upgrade)

    @alchymyth, I hadn’t tested throughly enough to stumble on the exceptions, thank you!

    Hello,

    I am confused as to what the responsive structure do as my site https://www.iadrsolutions.com is not loading ‘responsively’ on mobile screen.
    Any suggestions are welcome.
    thanks,
    Cher

    @xuefang: It is considered impolite to interrupt another poster’s thread. You have already been asked in another thread to start your own topic. Please do so.

    Sorry I didn’t realise I was interrupting this thread. I posted here and then found another thread after posting here.
    Sure I can start another thread.
    Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘TwentyEleven Browser Resize’ is closed to new replies.