Responsive Web Design Tutorial #6 – Fluid Layouts

Yo gang, in this responsive web design tutorial, I’ll show what the difference between a fluid and fixed layout is, and why I always prefer to make a fluid layout rather than a fixed one.

Fluid layouts respond to viewport sizes in-between your media query breakpoints, but fixed layouts do not.


========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to – or

========== Social Links ==========

Twitter – @TheNetNinja –


  1. Now I finally understand why Front dev. put in % in width and height!
    I thought something more in adv. to scale every image, lol.

  2. thank you so much before this tutorial i used to use width with the px but now I will use percentage of width thank you so much net ninga to give valuable content free
    Love from Pakistan

  3. Mate once again!!! You did it again!!! I literally spent days and nights playing with %s ,pxs, ems, rems, vhs and properties trying to achieve what you've accomplished within less than 5 minutes!!! I was pulling my hair in desperation, cause it just wasn't working. This was a gamechanger. Nothing but love and respect. Cheers mate!!!

  4. The index.html doesn't have <meta name="viewport" content="width=device-width"> in its header.
    How does chrome know the viewport when we are resizing the window?

  5. NOW IT MAKES SENSE!!!!!!! That's why my website is not responsive love this video man I hit a wall in my design and you just helped me jump across man

  6. British presenters tend to have an unassuming style that doesn't waver between treating you like an idiot one moment, then expecting secret insight into complex matters the next. Just clear and informative. Great.

  7. HI! I'm wondering if you are using FirefoxDeveloperEdition, i wanna know what kinda browser do you have. The ruler system is awesome.

Leave a comment

Your email address will not be published.