Visual Media Query issue..

[Solarview]

Hi All,

I'm new to Dreamweaver 2020 and am trying to set up the Visual Media Query Bar.

I have toggled it 'on' and 'off'. So I can see it's there. But I can't get the VMQ Colored Bars to actually appear.

I have written Media Queries code directly into the CSS, and they do work properly with the code. But still no colored bars.

I'd like to use this feature as it obviously allows me the ease of clicking right to the proper media sizing points, within the VMQ Bar. Seems like a great feature. But I continue to get no colored bars added.

I've tried entering from both the side Proprties Panel, as well as the VMQB directly (with the "+" sign).

When I try using the VMQB "+", I get in the 'options box' the choice of either 'Create a New CSS File' or 'Define a Page'. I don't get the option of adding it to my 'styles.css' page, as the 'how to' shows.

If I use the 'Define a Page' option, it adds a new query to my CSS code, but again, even that still doesn't show up in my VMQB, ... no colored bars.

What small detail am I missing here??

Thanks

- Sol

[Jon Fritz · Accepted solution]

Is there any chance you have an error in your CSS formatting?

Even something tiny will throw DW for a loop compared to a browser (which is normally much, much better at guessing what is meant when it runs into code errors).

Try running your css through the validator at: https://jigsaw.w3.org/css-validator/ and see if there are any structural errors (especially a missing { or }.

[Solarview]

LOL! Yes, John, extemely possible I've made an error in my coding. I'm new to all this (...it was a New Year's resolution.)

I juat figured since it's working in my browser, and the DW Design/Live view, that it must be correct. 

But I'll try your suggestion.

[Solarview]

Hey Jon, Thanks. That did it. (Bookmarked that link!)

Ironically, DW was trying to let me know as well. I had left off a "rebrace" as DW called it.

Thanks, man!

- Sol

[Jon Fritz]

No problem.

Bookmark this one too: https://validator.w3.org/nu/

It's the html validator. Run it often to avoid having little things becoming big problems in your html. Also run it any time your page renders differently from what you'd expect between browsers. They're good at guessing, but they all have varying levels of how well they do it.

[Solarview]

Thank you, Jon. Much appreciated.

Bookmarked!  🙂