Keep scrolling for a basic step-by-step tut on how to make web responsive.

THE MOST IMPORTANT LINE OF CODE IN MAKING SOMETHING RESPONSIVE.

HTML

CSS

RESPONSIVE WEB

In your CSS once you’ve inserted your media query line of code and specified the maximum pixels of when you want your code to change, the box specified by you will change from its current colour (red) to the colour you’ve selected it to change to (yellow).

Note: this web’s parameters are set to 1024px x 721px (a laptop screen).

Note: this web’s parameters are set to the codes “(max-device-width: 768px)” hence once the screen is set to 768px (width) and 721px (a tablet screen’s px) the now responsive web will change from red to yellow once it reached the correct amount of pixels.

RESPONSIVE WEB EX 2

Standard laptop size screen

As an addition, we added “width: 100%” which changes the width of ‘Boks_01,’ once at tablet pixel size. On can see that ‘Boks_01’ is two separate colours before this line of code.

If you change pixel dimension slightly anything over 768px, the responsiveness of the site will kick in and the boxes will split into two again.

CDOE HELP: CSS TRICKS