⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Responsive Web Design Made Simple CSS media Rule Tutorial

Published : April 10, 2015   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
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>
▲