Basic responsive design example.

by razh

HTML

<div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi labore temporibus alias tempora nemo in repudiandae dolorem aperiam aut possimus laborum assumenda aliquid laboriosam veritatis quae provident quos! Aspernatur ea.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni omnis veritatis saepe eos libero atque asperiores distinctio veniam enim quam laborum necessitatibus quos excepturi commodi illum suscipit quas nihil. Explicabo?</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nihil distinctio quibusdam mollitia ut quis cum quod eos sequi natus nobis sunt repellat deleniti deserunt ullam debitis labore doloribus nulla!</p>
</div>

CSS

@media (max-width: 640px) {
    .text {
        background-color: firebrick;
    }
}

@media (max-width: 480px) {
    .text {
        background-color: red;
    }
}