Member Avatar for vizz

I'm using media queries.

my code is not working for following resolution.

240 x 320 (small phone)
320 x 480 (iPhone)

I want to add this

#wrapper { width: 100%;} 
#column1 { width: 100%;} 
#column2 { width: 100%;}

What about meta tag? (I'm using this <meta name="viewport" content="initial-scale=1.0, width=device-width"/>)

  • 2 Contributors
  • 4 Replies
  • 332 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by vizz

Dani AI

Generated

Quick clarification for and future readers: the reason max-width commonly "just works" while max-device-width appears unreliable is how modern phones map pixels. High‑density screens use a devicePixelRatio that makes physical pixels different from CSS (layout) pixels, and the viewport meta controls how many CSS pixels the page gets. That mismatch makes device-specific queries brittle. Treat breakpoints as layout decisions, not device checks.

Troubleshooting checklist (prioritized):

  • Confirm a viewport meta tag is present so the layout viewport matches the device width and default scale.
  • Prefer a mobile‑first flow: base (small) styles first, then use min‑width breakpoints for larger layouts.
  • Choose breakpoints driven by the design (where content breaks), not by specific phone models.
  • Keep media queries inside CSS and place them after base rules so they override as expected; avoid setting restrictive media attributes on the linked stylesheet.
  • Use fluid techniques: flexible containers, percent/flex sizing, images with max‑width, and box‑sizing: border‑box for predictable math.
  • Verify the stylesheet is actually loading (Network/Elements panel), clear caches or do a hard reload, and test in DevTools plus at least one real device.
  • Check for specificity conflicts or !important rules that block the media query styles.

Practical snippet (modern, non-device approach):

* { box-sizing: border-box; }

.container { display: flex; flex-wrap: wrap; gap: 12px; }
.col { flex: 1 1 280px; min-width: 220px; }

img { max-width: 100%; height: auto; display: block; }

Note: 's media-query examples are a fine starting point. The above guidance just shifts the strategy from targeting device resolutions to building fluid, content-driven breakpoints so the layout behaves consistently across densities and browsers.

Recommended Answers

All 4 Replies

Member Avatar for Member #949455

my code is not working for following resolution.

You need to read more about creating a mobile websites

You need to read this:

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

To answer your question regarding about this:

240 x 320 (small phone)
320 x 480 (iPhone)

You need to add this

/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#wrapper { width: 100%;}
#column1 { width: 100%;}
#column2 { width: 100%;} 
}

/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
#wrapper { width: 100%;}
#column1 { width: 100%;}
#column2 { width: 100%;} 
}

/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
#wrapper { width: 100%;}
#column1 { width: 100%;}
#column2 { width: 100%;} 
}

You need to play around with the style it to get it right resolution for your website (it's base on the website design and it varies for each website but in the end you need to make adjustment in @media query. The reason why it is like this because it's an outline design for each device.

Regarding about the meta-tags you can read that from the link to get an idea.

I wouldn't worry about that for now until you fixed resolution.

Edited by Member #949455 because: grammer
Member Avatar for vizz

max-device-width is not working for me but max-width works well.

any problem on client side when uploaded to server?

Edited by vizz
Member Avatar for Member #949455

max-device-width is not working for me but max-width works well.

how do you link your css file?

it should look like this:

<link href="css/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" />

the phone.css should have this:

/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#wrapper { width: 100%;}
#column1 { width: 100%;}
#column2 { width: 100%;}
}
/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
#wrapper { width: 100%;}
#column1 { width: 100%;}
#column2 { width: 100%;}
}
/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
#wrapper { width: 100%;}
#column1 { width: 100%;}
#column2 { width: 100%;}
}

Do you understand how this works now?

You need to play around with the style to get the right resolution for your website meaning this:

#wrapper { width: 100%;}
#column1 { width: 100%;}
#column2 { width: 100%;}

Like I mention before it's varies on designs so you need to adjust the style to make your website looks right.

What I just posted is just an outline of 1 mobile device I used so it really depends on your design.

Edited by Member #949455 because: grammer
Member Avatar for vizz

Thanks
It's working

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.