Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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. @media - lib/CSS/media <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>
thumb

CSS Videos

Responsive Dynamic Layouts

Media Queries Responsive Website Layout TutorialResponsive Web Design Made Simple CSS media Rule TutorialMobile Friendly Test Responsive Website Development Case StudyViewport Percentage Units CSS HTML Layout TutorialAuto Adjusting Stretch Fit Website Layout TutorialBackground Size Scale Stretch ImageMulti Column Content Layout Grid TutorialFlexbox Flexible Box Layouts Flex WebsiteGrid Layout CSS Tutorial and Documentation Reference