Responsive Website Design Tutorial: Using Media Queries

Learn how to incorporate media queries into your designs to switch styles depending on the size of the browser window. Website: http://www.awfulmedia.com Twi… Related posts: CSS3 Responsive Web Design – Media Queries Adobe Edge Reflow Preview Tutorials Build Responsive Web Design Media Queries Techniques Blue Water Media Web Designers Impart Dynamic and Interactive Face to […]


Learn how to incorporate media queries into your designs to switch styles depending on the size of the browser window. Website: http://www.awfulmedia.com Twi…

Related posts:

  1. CSS3 Responsive Web Design – Media Queries
  2. Adobe Edge Reflow Preview Tutorials Build Responsive Web Design Media Queries Techniques
  3. Blue Water Media Web Designers Impart Dynamic and Interactive Face to Website for Alliance for Women in Media
  4. HTML Tutorial 5 – Links & Menu Bars – Website Design Tutorial
  5. What is Responsive Website Design?

Popular Posts


24 Responses

05.24.13

Very Precise indeed. Loved it and could you please kindly create a tutorial on how to create a bootstrap like responsive navigation using jquery and css3? Cheers!

05.24.13

Liked, faved and bookmarked!

05.24.13

Wow been looking for a video that explained all this for about 2 days now, tanx for the vid!
Just wondering, what will happen to my navbar when its viewed on a mobile device? Do i have to make any changes in there? The navbar is a horizontal bar but for a mobile device it would be better maybe to have the buttons in a vertical way oppose to the horizontal desktop orientation.

05.24.13

Fab video, making my portfolio website and want it to be responsive and this really helped me understand it! Thanks v.much :-)

05.24.13

Simply awesome tutorial!

05.24.13

This is just what I need. Easy to understand. Thanks!

Hey Men, Just wanna say thank you for this vid! It’s awesome knowing this sort of coding as many clients will want projects that can fit on multiple device. I have always relied on tutorial to learn coding and web design and coming this far that now I’m interested in not just building plain old html but adapting to new technology on the web too. Thank you!

thank you very very

05.24.13

Thank you for a brilliant tutorial.

Big question though:

Can you control the order of the different elements so that for example when you view at smartphone size, the left column will stack below the right column.

Hope that makes sense.

This was ridiculously easy! I think I know most of it already so I will be hitting the deck running. I think you did something very right in this tutorial, thank you very much! :D

Now it´s 209 ups to zero downs. Great tutorial!

05.24.13

thank you …

05.24.13

Cool video! Idea for vid: Do a vid all about div’s how to get clean columns etc. That’s something I had a problem with when first starting…I would get all weirded out with the percentages, nothing was ever uniform etc. I know guys who are table and list wizards but they can’t wrap their head around getting things straight with divs…like your typically WP looking block with one main div in the center allowing for ads on either side.

What program are you using ? Intelicence is helping you with some tags and CSS

05.24.13

what program did you use in the video?

05.24.13

The sample is working in my browser.
When I test through my iPhone … I get the standard view.
I do have the meta/viewport tag defined.
Any ideas?

05.24.13

Seems to work! Thanks!
Keep the responsive tuts coming!

05.24.13

Does setting the image’s height:auto; do the trick for you?

05.24.13

Great vid getting this down to the basics.
Question: In the video I noticed the image size reducing with the screen width both horizontally and vertically. Using Firefox I only see the horizontal dimension changing.
How do we get both height and width to scale automatically?

thank you bro… may you share the codes? i mean, may you give a link for the codes?

05.24.13

I also want to share an infinite amount of love for making such a lovely video. I was intimidated by responsive design until this video, thought it would take lots of JS. THANKS! - Amin from trashness

05.24.13

Genius :) 

05.24.13

Great tutorial

05.24.13

Thanks for this tutorial on Responsive Web Design using media queries! I found it very helpful. I created a research board on Verious.com with some top tutorials on “Responsive Design and Best Structure for an HTML5 layout page”. Hope other developers can find this useful too. :)

Leave Your Response

* Name, Email, Comment are Required