I've been struggling to set the width inside @media in my code, but it's not working as expected. Here is what I have tried:
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%;
}
}
I'm puzzled as to why the css margin-right
property seems to be working while the width
property doesn't. It shows up in google dev tools but a trace over it is visible. Could I have missed something? Adding !important makes it work, but I am aware that it's not a recommended practice. Can anyone provide some guidance?