If you are looking to turn your website into a responsive one, but you don’t want to use a new template or a “foreign” code, this is your solution:

You only have to think about the items that will change with the size of the screen. This is an example of a <nav> original CSS properties:

nav {
    width: 1024px;
    margin: 0 auto 0 auto;
    overflow: hidden;
}

This CSS code says that the <nav> have a width of 1024 pixels, but if you want it to change with the screen size, you must to write, at the bottom of the CSS (yes, I recommend in the bottom) the magic code with only the changing properties:

@media (max-width: 900px) {
    nav {
        width: 768px;
    }
}

Yes, you’re so brilliant! The <nav> now have a width of 768 pixels if the screen is smaller than 900 pixels. You only must to put it between the @media curly brackets.

♪♫♪♫ TA-DAAA!