To prevent this, we add a helper div with the clearfix class. The columns will all pile up under each other, instead of moving to the next line as they should. In some scenarios, when a column has much more content and a bigger height then the ones after it, the layout will break. They only need half of the row, since there is more space horizontally on the screen. When the browser size gets into the medium category, they can move in together and share a single row. On extra small screens both the text and the image take up the whole width of the row. Try resizing the browser to see this text and the image rearrange for optimal viewing. Hit the Run button on the following example and try resizing your browser to see the layout adapt. When we define a rule for any device size, this rule will be inherited and applied to all bigger sizes, unless we overwrite it by supplying a new one. This is a powerful way how to control how layouts render on different devices.
0 Comments
Leave a Reply. |