css designer cant find my media querys?

[dougcomz]

The media querys are not visible in CSS Designer for my custom CSS?   This has happened a few times before, but the media querys I have set up do not appear in the designer module. And when I try to add new media querys, but they do not appear either. I'm using DW 20.1 in Bootstrap. The bootstrap CSS shows up, with all its querys. 

???

[Nancy OShea]

Bootstrap really does take care of most if not all breakpoints for you.  It's very rare that you should need additional MQs but if you do, add them below Bootstrap CSS.  Without seeing your code, I'm guessing you may have some code errors that need attention.   Check your CSS and skip the vendor-prefix warnings. 

https://jigsaw.w3.org/css-validator/

[dougcomz]

Thanks for getting back to me, I did run the code through the validator, but it's still no show on the MQs. A curious thing, don't know if it means anything, but when I hit Attach Style Sheet in the menu, and browse, it shows my CSS files as type: BBEdit text document. I don't remember seeing that before? Is that normal?

[Jon Fritz]

It almost sounds like the file has accidentally been saved with a .txt rather than a .css extension. 

It would make sense that the styles would be ignored in DW, it wouldn't know to add them if they were in a .txt file.

[dougcomz]

Thanks for responding - they still have .css on the ends, and when I do the same operation on my laptop, as I did on my desktop (where I do have BBEdit installed) it says type: Cascading Style Sheet, but DW still does not find the MQs. 

[Nancy OShea]

What's the URL to your site?

[dougcomz]

http://westsideobserver.com - that site is sort of working.

http://westsideobserver.com/NewBlank.html

This one fell apart when I did something, I don't know what it was. But now I can't get CSS Designer to work.

[Nancy OShea]

Your CSS files look OK.  But your HTML contains quite a few structural errors.  And that could be what's killing the CSS Designer.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwestsideobserver.com%2FNewBlank.html

[dougcomz]

Wow - Thank you Nancy - didn't know about this checker!

[dougcomz]

Unfortunately, that didn't work. Even after I traced down every detail, and ran the CSS validator as well and fixed a few things. I was hopeful at first, and 3 of the MQs showed up. But now they have disappeared again. 

[Nancy OShea · Accepted solution]

Please remove .98 from your media queries.  With pixels, you should round up or down to the nearest whole number.  

What happens if you comment out Bootstrap? 

[dougcomz]

Thanks Nancy I did that, and following tips from "shaijut"  on  stackoverflow.com (about how to remove a background img from small phones) I changed the portrait phones and smaller:

@media (max-width: 480px)

Changed landscape phones and portrait tablets to:

@media (max-width: 767px)

Changed portrait tablets and small desktops to:

@media (min-width: 768px) and (max-width: 991px)

Landscape tablets and medium desktops:

@media (min-width: 992px) and (max-width: 1199px) 

and desktops to: 

@media (min-width:1200px)

I am so grateful to you and "shaijut" because the CSS Designer feature now sees my MQs again! They are something I rely on and lost a lot of sleep over its failure for 3 days.  Ps - love your site!

[Nancy OShea]

Glad you got it all sorted.  Thanks for your feedback.

[Nancy OShea]

Bootstrap is a mobile first framework.  You don't need to REMOVE anything.  Simply add the background property to your desktop MQ like this. 

/* Show in Large desktops and laptops only */
@media (min-width: 1200px) {

.bgimg {
        background-image: url('img/your-bg-image.jpg');
        background-size:cover;
    }

}