Jump to content
shaijuelayidath

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

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.

 

 

 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...