hi:

i built site using DW cs6 and 960grid responsive..
i want to divide the css for individual desktop, tablets and mobile

outside of DW, i separate css into for different devices and sizes and nothing behaves..

DW wont let me use media queries and the 960grid responsive..

there must be a way to divide up the massive css sheets..

any help is greatly appreciated,

thanx

Dani AI

Generated

This thread shows the classic symptom: media-query rules exist but the page doesn't behave when the CSS is split. That almost always comes down to cascade/order, a missing viewport meta tag, or using the fixed 960 layout instead of the responsive variant — not Dreamweaver refusing to let you use queries. described the breakage and was right that Dreamweaver will accept media queries; the editor or Design view can however hide the real cause.

A reliable workflow:

  • Keep the 960 grid and core layout in a base stylesheet that loads first.
  • Put breakpoint overrides in separate files (or at the end of one file) so they can override base rules.
  • Prefer a mobile‑first flow (base = mobile; then add larger‑viewport overrides) or be consistent if using desktop‑first (then append max‑width rules after base).
  • Always include the viewport meta tag and test in a real browser (Design view may not simulate device widths).

Example head ordering (use this pattern or the reverse depending on chosen approach):

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

<link rel="stylesheet" href="css/960-grid.css">
<link rel="stylesheet" href="css/site-base.css">
<link rel="stylesheet" href="css/tablet.css" media="screen and (min-width:700px)">
<link rel="stylesheet" href="css/desktop.css" media="screen and (min-width:980px)">

Troubleshooting checklist:

  • Confirm each CSS file actually loads (Network panel).
  • Check computed styles to see which rule is winning (specificity/cascade).
  • Avoid runtime @import chains (they can change load order).
  • Clear caches or use a cache‑busting query while testing.
  • Verify the project uses the responsive 960 variant (fixed 960 will resist breakpoints).
  • Preview in a browser’s device simulator or resize the window; don’t rely on DW Design view.

Useful references: MDN — Media Queries, , 960 Grid System.

Recommended Answers

All 3 Replies

Member Avatar for Member #949455

DW wont let me use media queries and the 960grid responsive..

I don't understand your question. The CSS code should be external which is correct. I have used other verison of 960 grid responsive. I still have it. The question you ask doesn't really make sense.

The issue you are having is more related to the design template rather than a CSS

thanx for the reply:
if you build a site w/the 960 grid using DW, then try to add the media queries (in DW) it will not let you, stating that it will not let you. if you try to separate the css desktop , tab , phone rules
it will break.. unless you do somthing i am not seeing.. thats why i posted. maybe i make simple clerical error..

Member Avatar for Member #949455

if you build a site w/the 960 grid using DW, then try to add the media queries (in DW) it will not let you, stating that it will not let you. if you try to separate the css desktop , tab , phone rules

I connect my DW to EasyPHP and it's fine.

When I modify the 960 media query CSS with DW to my EasyPHP it's fine. How is it not letting you?

We are talking about this:

/* Media queries */
@media screen and (max-width: 980px) {

}

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

}

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

}

It works on DW. I don't understand what do you mean by separating? If create a website that has a media query you just put it all together for that 1 website. If you have a 2nd website then you need to make another set of media query for that website. Does that make sense?

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.