Highlighted

css designer cant find my media querys?

Community Beginner ,
Mar 01, 2020

Copy link to clipboard

Copied

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. 

???

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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? 

 

TOPICS
Interface, Other, Performance, Product issue

Views

1.3K

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

css designer cant find my media querys?

Community Beginner ,
Mar 01, 2020

Copy link to clipboard

Copied

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. 

???

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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? 

 

TOPICS
Interface, Other, Performance, Product issue

Views

1.3K

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
Mar 01, 2020 0
Adobe Community Professional ,
Mar 01, 2020

Copy link to clipboard

Copied

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/

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Mar 01, 2020 1
Community Beginner ,
Mar 02, 2020

Copy link to clipboard

Copied

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?

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...
Mar 02, 2020 0
Adobe Community Professional ,
Mar 02, 2020

Copy link to clipboard

Copied

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.

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...
Mar 02, 2020 0
Adobe Community Professional ,
Mar 02, 2020

Copy link to clipboard

Copied

What's the URL to your site?

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Mar 02, 2020 0
Community Beginner ,
Mar 02, 2020

Copy link to clipboard

Copied

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.

 

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...
Mar 02, 2020 0
Adobe Community Professional ,
Mar 02, 2020

Copy link to clipboard

Copied

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

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Mar 02, 2020 0
Community Beginner ,
Mar 02, 2020

Copy link to clipboard

Copied

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. 

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...
Mar 02, 2020 0
Community Beginner ,
Mar 02, 2020

Copy link to clipboard

Copied

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

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...
Mar 02, 2020 0
Community Beginner ,
Mar 02, 2020

Copy link to clipboard

Copied

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. 

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...
Mar 02, 2020 0
Adobe Community Professional ,
Mar 02, 2020

Copy link to clipboard

Copied

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? 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Mar 02, 2020 0
Community Beginner ,
Mar 03, 2020

Copy link to clipboard

Copied

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!

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...
Mar 03, 2020 1
Adobe Community Professional ,
Mar 03, 2020

Copy link to clipboard

Copied

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

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Mar 03, 2020 0
Adobe Community Professional ,
Mar 03, 2020

Copy link to clipboard

Copied

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

}

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Mar 03, 2020 0