| <header> | |
| <h1>Company Name</h1> | |
| </header> | |
| <div id="main"> | |
| <article> | |
| <h1>Main Content Here</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et ipsum quam. Donec tincidunt purus eget urna tincidunt, nec lobortis lacus egestas. Cras id faucibus nisl, et sodales diam. Nullam sit amet hendrerit odio. In hac habitasse platea dictumst. Vestibulum ornare libero sed urna suscipit interdum. In hac habitasse platea dictumst. Integer commodo lacus pulvinar, imperdiet justo vel, porttitor enim. Aenean at ante quis lorem molestie posuere id auctor tortor. In vel luctus elit. Cras felis mi, sollicitudin non feugiat eu, facilisis quis tortor.</p> | |
| </article> | |
| <aside> | |
| <h1>Related Information Here</h1> | |
| <ul> | |
| <li>Nulla blandit felis et orci aliquam accumsan</li> | |
| <li>Suspendisse feugiat tellus non massa consequat.</li> | |
| <li>Mauris eget magna non justo</li> | |
| <li>Sed at mauris ultricies, eleifend tellus faucibus</li> | |
| </ul> | |
| </aside> | |
| </div> |
[CSS] Make it responsive
ClientD wants their website to look good and be comfortable to use on any device. Using the following markup, make the contents of the #main element have a 2-column layout for wider devices, but 1-column for narrower devices.
A Pen by Patrick Ejelle-Ndille on CodePen.
| header { | |
| background: yellow; | |
| } | |
| #main { | |
| background: #CCC; | |
| } | |
| article { | |
| background: orange; | |
| } | |
| #main p { | |
| -moz-column-count: 2; | |
| -moz-column-gap: 10px; | |
| -webkit-column-count: 2; | |
| -webkit-column-gap: 10px; | |
| column-count: 2; | |
| column-gap: 10px; | |
| } | |
| aside { | |
| background: #090; | |
| } | |
| @media only screen and (min-width: 0px) and (max-width: 767px) { | |
| #main p { | |
| -moz-column-count: 1; | |
| -moz-column-gap: 1px; | |
| -webkit-column-count: 1; | |
| -webkit-column-gap: 1px; | |
| column-count: 1; | |
| column-gap: 1px; | |
| } | |