In This Lesson You Will Learn
There may be various reasons as to why web layouts that look fine on desktop monitors are often not suitable for smartphones. However, the “usual suspects” in this case are elements that are arranged alongside each other, such as horizontal menu bars or multicolumn layouts. On smartphones — mainly in portrait format — elements are logically arranged instead underneath each other.
In cases like these we cannot continue any longer to specify widths as a percentage — we need to make more extensive layout adjustments. CSS provides us with media queries for this purpose. They enable us to define different layouts for different screen and viewport sizes.