Hi guys..

Any tips for good practices of @media queries for responsive design (portrait and landscape) ?

Bootstrap! Bootstrap!

make only as few media queries as you need. don't make a ton of them.

and no DONT download a huge bulky framework (ala bootstrap) just for media queries. that's like building a mansion to park your car in.

You can take a custom build of bootstrap if you only want the media queries. Lightweight and easy. http://getbootstrap.com/customize/

I was suggesting using bootstrap im general, not just for media queries. But it just so happens that bootstrap helps out with that.

@patoncrispy but why...when you can just build your own for your own uses. I'm all for DRY...but media queries arnt something that is static (use these for every project) they are project dependant..only have the ones you need.

@mattwebdev I'm not good at CSS so using bootstrap to provide media queries for me works well and any dev that joins the project at least understands bootstrap. If I try to write my own, it probably won't be as good, probably buggy and most likely difficult for others to understand. If rolling your own queries is something you're good at, then great, but I've had a pretty good run of relying on bootstraps media queries. That said... flexbox.

Disclaimer: CSS and design are by no means my forte. I prefer to work on application logic and architecture and am content with leaving design to 'more interested men [and women]'.

I write responsive media queries on every project. don't know bootstrap well but I don't think it's gonna be worth it as it sounds like you already made a load of css for desktop..

my advice is have a media query every 100 pixels below 1020px, or whatever width your main content is and just work like that. you probably won't need much code at all to make it work unless your site has a lot of templates or is very complicated.

Please guys, we definitely do not want YABSS (Yet Another Bootstrap Standard Site) I've seen good examples using bootstrap, but I've also seen way too many direct copies of bootstrap starter templates with little to none customisation!

How I do css most of the time: myth.io + flexbox + 1-2 media queries