Highlighted

Visual Media Query issue..

Community Beginner ,
Feb 07, 2020

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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 }.

TOPICS
How to, Interface

Views

557

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Visual Media Query issue..

Community Beginner ,
Feb 07, 2020

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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 }.

TOPICS
How to, Interface

Views

558

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 07, 2020 0
Adobe Community Professional ,
Feb 07, 2020

Copy link to clipboard

Copied

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 }.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 07, 2020 0
Community Beginner ,
Feb 07, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 07, 2020 0
Community Beginner ,
Feb 07, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 07, 2020 1
Adobe Community Professional ,
Feb 10, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 10, 2020 0
Community Beginner ,
Feb 10, 2020

Copy link to clipboard

Copied

Thank you, Jon. Much appreciated.

Bookmarked!  🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 10, 2020 0