CSS Code Hints For Media Queries

Forum|Forum|9 years ago
February 17, 2017
2 replies
1246 views

This feature may be available in current versions of Dreamweaver (I'm still stuck with CS4), but I have noticed that when updating CSS rules for Media Queries, I have to constantly look at the initial CSS rules to see their current property: value (and to see which rules are already set so that I am not tempted to rewrite the same properties in the media query). For example, if I have a div with a width of 50%, when I am writing a media query, I would like to know the current value of that property without having to find/open the original CSS rule (usually in another file). As I am typing the width property of the media query css rule, I would like a little hint window to pop up that shows the current value. I would imagine this is a current feature (if not, it should be), but are there any add-ons for older versions of Dreamweaver?

Thanks.

This topic has been closed for replies.

Nancy OShea

Community Expert

CS4 has almost no support for CSS Media Queries.

Use your browser's Inspect Element feature. In Firefox, click on the Responsive Design Mode button. See screenshot.

Nancy O'Shea— Product User & Community Expert

Shan-DysignsAuthor

Inspiring

Since I discovered RDM in Firefox (Chrome, too) long ago, things have been much easier visually when it comes down to designing for various breakpoints. Now, if Dreamweaver has this functionality in current versions, then I can't wait to upgrade. What you showed does display what I am talking about, but this would still require me to navigate around to find what I'm looking for (opposed to a code hint window appearing with just the current property: value and not all the other eye-distracting mess.

Nancy OShea

Community Expert

The latest version of Dreamweaver CC 2017 has an optional Visual Media Queries bar. See help document below for details.

Use Media Queries to design responsive sites in Dreamweaver

Nancy

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

Are you talking about quickly finding out what the css property is for a <div> with a class or id while you are in code view? If so then the new version of DW has a 'quick edit' css feature which pops up if you click on a class/id name and shows all the current css properties associated with that class. I guess that is simpler than scrolling up and down another window to find the associated css.

Or maybe you are talking about something else you want to see in the css panel.

Brackets which is a free Abobe editor and which the new Dreamweaver coding environment is based upon also has this quick css edit feature.

Shan-DysignsAuthor

Inspiring

"Are you talking about quickly finding out what the css property is for a <div> with a class or id while you are in code view?"

No, I'm talking about when creating/editing CSS rules within a .css file. You might be talking about the Code Navigator when working within the page document (html, php, etc.). I wouldn't be surprised if this is just a matter of this feature not available with my current version. Speaking about Code Navigator, I guess what I am talking about would be similar (very similar) to how Code Navigator works, but what I want is for something like that when inside a .css file. I will just have to wait until I can upgrade everything.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded