CSS
How To Set Min Height and Width With CSS
Everyone who has a cat or a dog...
Boo dogs!
Anyway, everyone who has a cat or a dog has seen their pet try and squeeze themselves into a box that is clearly too small for them.
Case And Point
What they seem to need is a way to agree the absolute minimum size of a box so that they can each fit inside. Unfortunately, pets won’t be able to do this.
Because dogs are too dumb?
No.
Because cats are too stubborn?
They are but no.
It would just be impossible for every cat and every dog to agree on any box size.
However, in CSS there is a way you can make sure a HTML element doesn’t get too small.
We looked at the max-height and max-width properties in CSS, well there is also min-height and min-width properties too. These CSS properties tell the browser the smallest you want certain elements to be.
Just to be clear, max-height and max-width set the upper limit for size and min-height and min-width set the lower limit.
Divs
Let’s look at this box as an example.
You can keep your pizza, salmon is #1
Its colour, and size are set by this CSS.
background-color: salmon;
height: 100px;
width: 33%;
On laptops this looks fine but on smaller screens, like phones, the text might get squashed.
Click here to open a new tab with this box in. Change the size of your browser window and see how the box and text changes with it.
I agree with the box.
It has an important message.
We must protect the box!
We can use CSS to stop the box going below a certain size. This way we know the words won’t be distorted. The height of the box is fine but it is getting too small as the screen gets more narrow, so we need to set a minimum width.
To do this just, use the min-width CSS property and set the value to the smallest width you want this HTML element to be. Remember, this might be set in pixels, percentage or viewwidth.
min-width: 300px;
So this code replaces my old code using the width property?
No you need both.
If you only set a minimum width the browser doesn’t know what the maximum is.
So the box might take up your whole screen, which isn't what we want.
It’s important that you set the width of your element as well as setting the minimum width; although if you only use pixels then it won’t change. Only using a minimum width means there is no normal or an upper limit.
Let’s think about an example to do with the V E T S.
Oh no!
Why would you do this? This is supposed to be fun.
If I said to you, I am going to take you to the vets a minimum of twice this year, what would you think?
Well twice doesn’t sound too bad.
Yes, but remember, I said a minimum of twice.
I could take you to the vets every single day of the year and it would still make what I said before true.
You wouldn’t dare!
I’ll promise I’ll be good.
Well, I promise I’ll try.
Well, I promise I’ll consider it. Strongly.
With this additional line of code our CSS looks like this.
background-color: salmon;
height: 100px;
width: 33%;
min-width: 300px;
Click here to open a new tab with this box in. Change the size of your browser window and notice how it changes size.
You’ll notice that as the window shrinks, so does the box until it reaches its minimum width and then it doesn’t get smaller.
When your browser window is wide, the box can take up 33% of the width and be more than our minimum width of 300px. As the screen gets more narrow, the 300px becomes more than 33% of the width, but as 300px is the minimum the box can't get any smaller.
Images
The same approach can be taken with images. Let’s have a look at the following code.
<div>
<img src="aria-being-annoying-in-my-game.jpg">
<p>Sometimes the box is just too small.</p>
</div>
Here the CSS for the width of the img is:
width: 50%;
So the photo will always take up half the width of the div. But the div doesn’t take up the whole width of the screen either.
In this example, the width of the div is also set to 50%. So as the image shrinks with the browser window size, eventually it gets very small.
Well this is rubbish you can barely see my face!
I know. I’m helping you fix it.
Fix my face?
No, fix your code.
Your face is a lost cause.
Like with our div example, if you set the min-width in CSS, the image will continue to shrink until it reaches this minimum size. Let’s add some more code to the CSS for our image.
width: 50%;
min-width: 200px;
Still too small.
Try, like, 1000px.
That's way too big.
Let's settle on 300px.
Click here to open a new tab and try out this new code. Change the size of your browser window and see what it does. What do you notice about the div with the border?
Because we didn’t change the code for the div, it still continues to shrink as the window gets smaller. And as the image reaches its minimum size, the margins around the image have to get much smaller to keep the photo in the middle.
Try moving the min-width code to the div instead and see what happens.
And now with this code you can still make out Aria’s face. Even on small screens.
Lucky you.
Thank you for reading.
If you enjoyed this, please share so others can find us!
