Member Avatar for 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

  • 4 Contributors
  • 4 Replies
  • 186 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by HoverportMedia

Dani AI

Generated

For — a concise, practical checklist that builds on points made by and and addresses why responsive rules sometimes don’t take effect (something hinted at).

First essentials (add or confirm these in the page head and base CSS):

<meta name="viewport" content="width=device-width,initial-scale=1">

/* make media and images flexible */
img, video { max-width: 100%; height: auto; display: block; }

/* predictable box sizing */
*, *::before, *::after { box-sizing: border-box; }

Why those matter: the meta viewport tells phones to use the device width; flexible media prevents overflow; box-sizing avoids unexpected width math that breaks layouts.

Debug checklist (step-by-step)

  • View source to confirm the meta tag and responsive CSS are actually loaded (clear cache or use a hard refresh).
  • Use DevTools device/emulation and resize the viewport to find the exact pixel where the layout breaks — pick breakpoints based on those break points, not device names (as suggested).
  • Prefer a mobile-first cascade (base styles for small screens, then min-width queries in ascending order) so rules cascade predictably.
  • Check for syntax errors or stray braces in media queries (a common cause for them being ignored; something to watch for in examples).
  • Test on at least one real device; emulation is helpful but not perfect.

Final tips
Keep the number of breakpoints small and content-driven. Use responsive images (srcset/picture) for performance. If nothing changes after these checks, confirm that the responsive stylesheet isn’t being overridden by inline styles, higher-specificity selectors, or a cached file.

Recommended Answers

All 4 Replies

Member Avatar for 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?

Member Avatar for kan_1

Please see my website link

Member Avatar for <M/>

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

commented: May be u can find the queries as i am trying to resolve my issue i removed for some time and kept again yesterday +0
Member Avatar for 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.

commented: Wow!! Thanks a lot for giving code. Now i am confident on moving ahead on media queries +0
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.