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: