Issue
I'm currently creating a website for a University-Project. Therefore I want to change the view based on the screensize (for mobile-users).
Therefore I would like to change some properties, which I've already specified inside the regarding class, but it seems like that's not possible.
To show the problem, I've created these two buttons. Button 1's color is specified by the background-color: blue and shall be changed to red if the size gets under 600px, while Button 2's color is not specified.
When you now change the Screen-size, you will see, that only the color of Button 2 will be changed.
So my question is: Is it possible to change properties which already been specified as well and if so, how?
Thank you in Advance!
@media screen and (max-width: 600px) {
.button_one {
background-color: red;
}
.button_two {
background-color: green;
}
}
.button_one {
background-color: blue;
}</head>
<body>
<div>
<button class="button_one"> Button 1 </button>
<button class="button_two"> Button 2 </button>
</div>
</body>
</html>Solution
The blue background wins here just because it is later in the stylesheet. The media query does not affect specificity. For this to work, you should change the position of the media query, like so:
.button_one {
background-color: blue;
}
@media screen and (max-width: 600px) {
.button_one {
background-color: red;
}
.button_two {
background-color: green;
}
}<div>
<button class="button_one"> Button 1 </button>
<button class="button_two"> Button 2 </button>
</div>Answered By - yousoumar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.