Building a website is one thing but making it responsive is the most important thing. Many a time people build a website but the website doesn’t respond well when opened with different devices with different aspect ratios. You’ll have to handle rendering an element’s width or height, and specifying varied width sizes using media queries is not easy.
It’s important that you make your website responsive. But don’t worry – characteristics like max-width and min-width are here to help. These properties allow us to avoid using media queries to solve some responsive challenges.
Today, we are going to discuss the importance and how to implement max/min-width and height in your website so the website runs smoothly without creating any errors.
Max-width Property
Max-width property allows you to specify a width which the element will not exceed. It means that the element can increase until the specified limit is reached which can be an absolute or relative unit. A relative unit such as percentage can be useful in some and disastrous in others. The default value for max-width is none.
Let’s take an example of an image. In the below image as you can see in the first case image is bigger than the parent while in the second it got fixed by setting the max-width.
For the second case when we specified that the max-width of the image is 100%, the image does not exceed the widths of its parent. However, it will work only if the image is bigger than the parent. When the image is smaller the max-width will not work as the image is already within the width of its parent.
Min-width Property
As the name already suggests it’s the opposite of the max-width property. Min-width allows us to specify the min-width of an element which prevents it to become less than the specified value. The default value for min-width is auto, which resolves to 0.
Let’s explain it using a simple example.
As you can see in the above image, we have a button in which text varies from a single word to multiple words. We will the min-width so that the minimum width of the button will be fixed even it has one word written in it. In this case, we have used min-width as 100px so that even if the button has the single word ‘Done’ it will be noticed and the width does not get smaller.
Min-Width with Padding
In case its content is longer, the min-width can extend the width of the button. In this case, it’s advisable to add padding on the horizontal sides to achieve a proper-looking button.
Max-Height Property
The max-height property allows you to specify a height which the element will not exceed. It means that the element can increase until the specified limit is reached. The default value for max height is none.
Now let’s take an example: As you can see in the below picture, we have taken content as an example. We have set the max-height of the content but as the text is bigger than the specified value the text is overflowing. The text exceeds beyond the parent boundaries because of that.
Min-Height Property
As the name already suggests it’s the opposite of the max-height property. Min-height allows us to specify the min-width of an element which prevents it to become less than the specified value. The default value for min-height is auto, which resolves to 0.
Now let’s take an example.
We have a section with a description text. The goal is to have a minimum height for the section, so it can handle short or long content. Consider the below basic case:
The minimum height is 100px, and with flexbox, the content is centered horizontally and vertically. What would happen if the content were longer? For example, a paragraph?
Conclusion
Making the site responsive is an important factor in web development. So, that the website doesn’t show errors or look messy whenever opened on the screen of different aspect ratios. Keeping a track of responsiveness is an important job. It can be challenging but the max-width, min-width, max-height, and min-height help you tackle these challenges.