Media query Max Width example
Media query max-width will apply some styles on the defined or less screen width.
Example:
The element will have static 50px
width as long as the screen width is greater than 1280px. Thanks to @media
we defined that on the lower resolutions the element width will always be 100%
.
<style>
.myElement {
background: green;
width: 50px;
height: 50px;
}
@media screen and (max-width: 1280px) {
.myElement {
width: 100%;
}
}
</style>
<div class="myElement"></div>
Output: