Jump to content

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


shaijuelayidath
 Share

Recommended Posts

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.

 

suggestions.jpg

 

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

 

Thanks!

Shaiju.

 

 

 

Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...