classes in 'min-width' not showing in Dreamweaver suggestions

[shaijuelayidath]

Hello Friends,

 

I have the following CSS class 'box' defined with 'min-width' media query.

@media screen and (min-width: 768px) {
    .box {display:none}
}

But this class is not showing in dreamweaver class suggestions. But when I put the same class using 'max-width', then suggestion is showing as per the following screenshot.

 

 

Anyone know whats the reason and how to resolve this. Thanks in advance.

 

Thanks!

Shaiju.

 

 

 

[dsonesuk]

What if you define the class outside media queries as default mobile first or desktop first styling.

[shaijuelayidath]

Hello dsonesuk,

 

Sorry I did'nt understand your comment. Can you please explain.

 

Thanks!

Shaiju

[dsonesuk]

You would set default styling first in this example it sets default styling for mobile the media queries are used to make adjustment as device size increases.

.box {
background-color:blue;
}
 
and so on...
 
then media queries below this.
 
 
@media only screen and (min-width:290px) {
 
 
}
 
@media only screen and (min-width:480px) {
    .box{
        background-color: red;
    }
}
 
@media only screen and (min-width:768px) {
 
.box{
        background-color: lime;
    }
}
and so on.....

For desktop first the default styling is for largest of devices and media queries start from 1280px working down to small mobile to make styling changes as device gets smaller, so .box class is defined outside media queries and therefore should be viewed always.

Edited June 20, 2016 by dsonesuk

[shaijuelayidath]

Hello dsonesuk,

 

Thanks for your explanation, I understood it.

But my question is not concerned about 'Mobile First' or 'Desktop First' approach.

If you using 'Dreamweaver' can you check the following steps.

 

1. Write the following code in your CSS files which linked to the HTML

@media screen and (max-width: 768px) {
    .box {display:none}
}

2. Come in to HTML file then type the following code:

<div class="

when you type upto the above code, an automatic suggestion box will come and it shows the class 'box' you have already defined in the CSS file using " max-width ".

 

3. Now change the the same code into 'min-width' as follows:

@media screen and (min-width: 768px) {
    .box {display:none}
}

4. Then type the following code :

<div class="

Now automatic suggestion box is not showing the class 'box'.

 

Conclusion of my question is:

CSS classes defined in 'max-width' will show in the automatic suggestion box in dreamweaver, But 'min-width' is not.

 

I hope you understood

 

 

Thanks in Advance

Shaiju

[dsonesuk]

I understand that as I use to use dreamweaver, it takes time for the class to appear in dropdown, I don't know if the dreamweaver pane size is affected by media queries now?, and the class does not show because it is outside the range determined by the media query.

[shaijuelayidath]

Thanks dsonesuk, I also think it may be any technical bug.