Written by Andrei MoraruMay 21, 2020

Somewhere between technicality and non-technicality - a bridge of communication between technical knowledge and creativity is created. And there we meet our developers who want to give voice to the code and knowledge gathered during all the years of hard work, to share them with anyone who is eager to learn new things!

For this exact reason, the series of "Learning CSS with Less" created by Andrei Moraru, a great #remotewarrior from our community, delighted us from the very beginning. 

Today, a new part of this course is here for you. Here you can find all the parts of Andrei's puzzle, to form a whole and give meaning to this course. Enjoy!

  1. Topics of discussion
  2. Maximum and minimum height
  3. Maximum and minimum width

1. Topics of discussion

In this tutorial, we are going to talk about maximum and minimum values for width and height. So, let's have some fun.

2. Maximum and minimum height

In CSS, you have the possibility of setting a maximum or minimum height on an element. This is obtained by using the following properties:

The max-height is useful to ensure that an element does not exceed a certain height and is usually used alongside the overflow property. And the min-height is used to ensure that an element has a certain height reserved for it and is very useful when you have elements that display images since you can use this property to ensure the minimum height of the image so that the page does not flicker when loading the page (since the web site needs to request the image from the server).

3. Maximum and minimum width

In CSS, you also have the possibility of setting a maximum or minimum width on an element. This is obtained by using the following properties:

The usage is similar to max-height and min-height.

Here are some examples:

This is an element with a minimum height.
This is an element with a maximum height.
This is an element with a minimum width.
This is an element with a maximum width.
  

And here is the CSS code:

.min-height {
  min-height: 200px;
  border: 1px solid black;
}

.max-height {
  max-height: 50px;
  max-width: 50px;
  overflow: auto;
  border: 1px solid black;
}

.min-width {
  min-width: 200px;
  border: 1px solid black;
}

.max-width {
  max-width: 50px;
  border: 1px solid black;
}

That about covers it for this tutorial. In the next one, we are going to discuss the initial and inherit values for CSS properties. See you then.

Interested in finding out more about the author? Andrei's world is just a click away!

If you are interested in working with a team of expert remote developers, contact us TODAY!