How does the sidebar of the WordPress theme twentyeleven manage to stack down at certain windows size with CSS?

3 Views

This is when the theme is full size:

enter image description here

Read More

enter image description here

When the browser’s window get smaller the sidebar goes to the bottom and the main content occupies the whole layout:

enter image description here

I think this is the CSS that does the trick: 

}
#primary {
    float: left;
    margin: 0 -26.4% 0 0;
    width: 100%;
}
#content {
    border-top: 1px solid #444;
    margin: 0 34% 0 7.6%;
    padding: 20px 0 1.625em;
    width: 58.4%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

(not very sure).

This is a demo of the theme.

How does the sidebar manage to stack down at certain windows size with CSS (letting the main content occupy all the space)?

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. This is called Responsive Design. Check this – coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/.

    And in the above wordpress theme there is a file style.css that links from https://s2.wp.com/wp-content/themes/pub/twentyeleven/style.css.
    In this file there’s code that makes sidebar stack down at certain window size.

    @media (max-width:800px) {
  [...]
  #main #secondary {
    float:none;
    margin:0 7.6%;
    width:auto;
  }
  [...]
}

    @media (max-width:800px) is the thing that makes sidebar auto-adjust below the specified screen size. I hope you got it.