CSS3 & HTML - creating webpages that change for mobile

Making sure that a webpage is mobile friendly can be a challenge for sure. However with the @media query in CSS it can be made a bit easier.

Here is an example that means that IF the width of the screen is greater than 480, then the following rules apply - background-color: lightgreen;

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }}

With that in mind, you can then go ahead and make things position better, because inside of that @media screen query you can go ahead and change the size of text, move things around, cancel out objects etc. It's really a very useful feature to utilize if you're building up a webpage from scratch, or even making a page mobile friendly.