Responsive Web Design Made Simple CSS media Rule Tutorial
Learn the CSS @media rule and the easiest way to make a responsive and mobile-friendly website layout.
<style>
body{margin:0px;}
#box1{ margin: 0px auto; width:1000px; height:400px; background: pink; padding:20px; }
@media screen and (max-width: 768px) {
#box1{ margin: 0px auto; width:98%; height:400px; background: #B3D9FF; padding:1%; }
#box1 h2{ font-size:0.9em; }
#box1 p{ font-size:0.7em; }
}
</style>
<div id="box1">
<h2>My web site</h2>
<p>Blah blah blah...</p>
</div>