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. 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

  2. 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!!!

  3. 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?

  4. 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.

Leave a comment

Your email address will not be published.