HOME | PHP Tutorial | CSS
facebook icon
HTML Tutorial

CSS Tutorial

CSS max width, max height, CSS responsive

The max-width property is used to set the maximum width of an item. Maximum width of element does not include css paddings, borders or margins. The max-height property allows you to specify the maximum content height of an element. This maximum height of element does not include css paddings, borders or margins.

CSS max-width Property

The max-width css property define the maximum width of an element (box).
If the content box is larger than the css max width, it will automatically change the width of the box.
If the content is smaller than the css max width, the max-width css property has no effect.
Note: The value of the css max-width property overrides the width property.
Example 1:
max-width: 450px;
height: 210px;
border: 1px solid #73AD21;
background-color: red;

CSS max-width Property

CSS max-height property allows to specify the maximum content height of an item.
This maximum height does not include CSS paddings, borders, or margins. The box that has CSS max-height applied will never be taller than the value specified, even if the height property is set to something larger. For example, if the css hight is set to 450px and the max-height CSS is set to 250px, the actual height of the element is 250px.
div-box2 {
height: 450px;
max-height: 250px;
border: 1px solid #73AD21;
background-color: red;
CSS max-height attribute is usually used in conjunction with CSS min-height attribute to produce a height range for the element specified.

CSS responsive

If CSS width property is set to a percentage (%) and the height is set to "auto", the box will be responsive and scale up and down how is the text larger:
  width: 100%;
  height: auto;

CSS max width, max height, CSS max width responsive CSS max width - max height - CSS responsive - css tutorial

3010. CSS Margin, top, bottom, left, righ, auto, css tutorial
CSS Margin, top, bottom, left, righ, auto css tutorial

2225. CSS Tutorial - Background
Once you specified you want no-repeat for your background image, the browser default behavior is to top-left align the image. And this takes us to the next background property

823. CSS Text Align - CSS tutorials - w3resource


822. CSS selectors - CSS tutorials - w3resource


2230. CSS Tutorial - External, internal or inline
The inline CSS code is the one that goes inside the head section of the HTML document. This is very useful when you want to give a specific page, his own custom style. The is no difference between the CSS code that you place inside an external file and t

821. CSS padding-top property - CSS tutorials - w3resource


Your add here
How to get PHP errors to display?
How to prevent sql injection in php mysqli
How do I get PHP errors to display - PHP error_reporting()
mysql_query(): The mysql extension is deprecated and will be removed i
Function eregi_replace() is deprecated in php - How to fix
PHP delete an element from an array
Uncaught Error: Call to undefined function MYSQL_NUM_ROWS() in
Deprecated: mysql_connect() mysql extension is deprecated and will be
mysqli_fetch_array() expects parameter 1 to be mysqli_result boolean g
SQL IN Operator - example
SQL like syntax and example
SQL WHERE AND & OR multiple conditions
SQL create table primary key autoincrement
PHP mysqli_connect () Function
SQL COUNT(), AVG() and SUM() Functions
Display data from SQL database with MySQLi into php - html table
SQL mysql order by columns, by date, by asc, by desc, random with PHP
PHP mysqli_query() Function - mysqli query
SQL delete row - SQL delete table
SQL update - SQL update select
Insert into SQL - Insert into table SQL - Insert data in sql
Login in PHP - simple login script with PHP MYSQL