Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
For example, http://www.breakingnews.com is using Twitter Bootstrap, which does a great job at this sort of repositioning. When the browser window is resized horizontally, the page adjusts accordingly. Column sizes shrink, columns and headers disappear, icons and buttons shift aside, and text is realigned. How does this work?
In this particular case CSS media queries are being used. This allows for different stylesheets to be used depending on the width of the device. This means they have a small, medium and large stylesheet which shows different columns depending on the width. This tutorial covers media queries.
In addition to this the widths of elements must be specified in %. This is called a fluid layout. This makes them relevant to the current browser size. A fixed width layout is the same width regardless of the browser size and thus simply cuts off content when the browser is resized.