CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Chiien
Chiien

Reputation: 341

How would I use width in @media queries in css

I am setting width inside @media, but is not working! How would I accomplish this? Here is my code:

mat-toolbar {
    app-toolbar-left {
        width: 35%;
    }

    app-toolbar-right {
        width: 22%;
    }
}

@media (min-width: 1024px) {
    app-toolbar-left {
        width: 25%;
    }

    app-toolbar-right {
        width: 17%;
        margin-right: 1.5%;
    }
}

My doubt is the css margin-right is working, but why is the width not? Just appear in google dev tools, but has a trace over... Did I forget something? If I set !important it works, but I know is not a good practice. Can anyone help?

Upvotes: 0

Views: 65

Answers (2)

Johannes
Johannes

Reputation: 67748

If those are CSS classes (you didn't mention anything else), you need to use a dot before the class names, like 

.app-toolbar-left { 
  ... 
}
.app-toolbar-right  {
  ...
}

etc.

The media query itself is written correctly, but if these are CSS classes (and not some framework), you need those dots for the classes in the stylesheet.

Upvotes: 0

Arkellys
Arkellys

Reputation: 7790

Try like this :

@media (min-width: 1024px) {
    mat-toolbar {
        app-toolbar-left {
            width: 25%;
        }

        app-toolbar-right {
            width: 17%;
            margin-right: 1.5%;
        }
    }
}

I think the problem is just because your selectors are less detailed in your media queries.

Upvotes: 2

Related Questions