Having issues with responsive design

[kan_1]

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

[Violet_82]

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?

[kan_1]

Please see my website link http://www.adsclassicalguitarist.com/appliedbiosensor/

[<M/>]

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

[HoverportMedia]

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.