When you’re writing media queries to ensure that your designs are mobile-friendly and fully responsive, there’s a good chance that you’re defining your widths in percentages rather than other fixed units of measurements (pixels, ems, rems, etc). When you define the widths of your elements in percentages, your elements change size based on the size of their parent element or the size of the viewport itself, which is great for optimizing your designs so they look just as good on a small mobile device as they do on a large desktop — but don’t forget to define fixed max and min widths for your elements as well.
It’s important to define a max and min-width because then no matter how large or small the viewport may become, your HTML elements won’t be able to go past their defined min and max widths. For example, if you want a div’s width to be 90%, on a giant desktop monitor, 90% could be HUGE. Maybe what you really want is for your div’s width to be 90%, unless that exceeds about 1000px. That’s when you define a max-width:
- div{
- width: 90%;
- max-width: 1000px;
- }
It’s the same concept with min-widths:
- div{
- width: 30%;
- min-width: 100px;
- }