HTML5 and CSS3 Responsive design with media queries

In this tutorial I show you how to use media queries to make your website responsive and work across multiple devices and screen widths. . Follow me on Faceb… Related posts: CSS3 Responsive Web Design – Media Queries HTML5 CSS3 Responsive Web Design Disenando Disenando Pie Pagina O’Reilly Webcast: HTML5 and CSS3 Responsive Web Design […]


In this tutorial I show you how to use media queries to make your website responsive and work across multiple devices and screen widths. . Follow me on Faceb…

Related posts:

  1. CSS3 Responsive Web Design – Media Queries
  2. HTML5 CSS3 Responsive Web Design Disenando Disenando Pie Pagina
  3. O’Reilly Webcast: HTML5 and CSS3 Responsive Web Design
  4. Responsive Web Design: Media Queries
  5. Curso Responsive Web Design: Media Queries

Popular Posts


25 Responses

01.12.15

Thank you, Sir! :) 

01.12.15

I followed your method and it worked perfect but I then copied the code to
another one of my projects and now the image isn’t moving any idea what it
could be?

01.12.15

Hi Quentin….
Yours are the best of all tutorials I have come across on the net. I am
quite a beginner with an Art Background. I am able to understand every
point and see them working perfectly making me very confident that I too
can create a website. Appreciate your philanthropic nature.

01.12.15

Thanks, very informative. I’ll have to try this on my next site.

I don’t have web developer option under the tools so please can you tell
where can I get that from 

01.12.15

Thank you Quentin, I’ve been running in circles trying to work out how to
do this. Who would have thought it was so straight forward. Great video.

01.12.15

now this is learning, i wish you would post the code so we could download

01.12.15

Excellent Bro. Really helped clear up some things. Had that Eureeka moment
and called the wife to let her know I was finally getting it lol. Keep up
the good work. 

01.12.15

hi,
can u made tutorial on extracting exif data from input tag(type of “file”)
…

Nice tutorial, but I have a little problem, I have the text in a column and
it doesn’t resize itself like in your video, it just go out the box, why?

01.12.15

Thank you very much. Your tutorial is the best!! It solved my problem
precisely.

01.12.15

Good job sir, very helpful tutorial!

01.12.15

thank you!!!!!!!!!!!!! :D 

01.12.15

thanks for this i need extra tutorials so mail me @ attarun.cse@gmail.com

01.12.15

Really very helpful and simple video. Thanks a lot! :) 

01.12.15

Excellent tutorial…… deserves a thumbs up. CHEERS!!!

Thank Quentin, this really helped.

01.12.15

Hey Its really helpful video to kick start with Responsive Webdesign.
Thank’s alot.

01.12.15

Thanks you for such clear tutorials. How would you deal with the fact that
many mobile devices have resolution higher than standard screen now? For
example, on a 15 inch lap top, with browser width at 1200px, you can have 5
columns being readable. However, on an iPhone, 5 columns would be way to
small. Since the iPhone has a resolution of over 1200px, this media query
will render the page at 5 columns. We would really want, on an iPhone we
may want only 2 columns.

01.12.15

whats your League ?? Challenger Tier? 

01.12.15

Nice Tut dude ;) 

01.12.15

One more question Quentin, I have a “top” div with a Paypal shopping cart
on the right, and a “welcome” on the left ,
Then underneath I have “navigation” div,
then a “img” div (960px wrapper),
then 3 columns (and 5 rows) of my products.
My question is, Once I reach query for the 3 columns, is it proper to
display them as 33% each? where would the 1% end up?
Would I then use 66% and 33% to turn them into 2 columns?
I’m hoping that the Paypal cart on the top right does not get effected by
any changes i make.
Sorry for all the questions, I guess I’m taking advantage of the one person
that made it all clear for me.
Thank you thank you!

01.12.15

you make the best tuts I ever saw for sure…thx and keep going !

01.12.15

Awesome, thank you! I needed this tutorial, one thing I have been looking
around is how to make the main navigation from the PC view, turn into a
mobile friendly menu, where the menu bar actually turns into a list and is
triggered by a menu icon on the corner, you know what I mean?, any
tutorials on that? (as continuation of this one?)

Excellent tutorial! From all of us @ Juxcedesign

Leave Your Response

* Name, Email, Comment are Required