0

I am trying to design my website in responisve way. So i am struggling to design media queries. Could anyone help me for writing media queries code. As my website should appear properly in mobile as well

4
Contributors
4
Replies
22
Views
3 Years
Discussion Span
Last Post by HoverportMedia
1

This should give you an idea http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ although to be honest I never use that many media queries. As long as you target tablets and phones you should be ok. In terms of widths to use, I am of the opinion that the layout should dictate how many queries and what type of queries you need: in other words, if your site breaks at 940px wide, then use 940 as a trigger point for a media query. DOes it make any sense?

1

I am not seeing anything going on, at least not on your site.

Votes + Comments
May be u can find the queries as i am trying to resolve my issue i removed for some time and kept again yesterday
1

Your media queries will all depend based upon what you're trying to achieve. Below is a set of media queries, I've personally found to be quite helpful in some lights:

/* TABLET LAYOUT 
----------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 991px) {
}


/* GO TO ONE COLUMN LAYOUT
----------------------------------------------- */

@media screen and (max-width: 750px) {
}


/* MOBILE LAYOUT (PORTRAIT/320PX) 
----------------------------------------------- */

@media only screen and (max-width: 767px) {
}


/* WIDE MOBILE LAYOUT (LANDSCAPE/480PX) 
----------------------------------------------- */

@media only screen and (min-width: 480px) and (max-width: 767px) { {
}

I would also recommend investigating the app called Dimensions for Google Chrome. It's definitely the number one application I use when develop a responsive design.

Votes + Comments
Wow!! Thanks a lot for giving code. Now i am confident on moving ahead on media queries
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.