CSS Media Queries - max-width or max-height

Last Updated : 01 Aug, 2024

CSS media queries can help you apply various styles depending on the user's device or viewport properties. You may make responsive designs with them, which change to accommodate various screen sizes, orientations, and device capabilities.

The @media rule in CSS is used to write media queries, which can target a wide range of characteristics, including width, height, aspect ratio, device resolution, and more. The @media rule has a 'media-condition' enclosed in it which takes the values of "max-width" or "max-height" or "min-width" or "min-height" which specify the maximum width or maximum height or minimum width or minimum height respectively at which the style will be implemented.

To use the max-width and the max-height media conditions at the same time with "or" logic, we have to state them with a comma in between. The OR logic implies that when the screen requirements meet either of the conditions, the properties will be applied.

Syntax:

@media (max-width: value in pixel), (max-height: value in pixel) {
     ...
}

Example 1: The code demonstrates the usage of the media conditions max-height and max-width with "or" conditions. The max-width and max-height values are given as 768px and 500px respectively so when the width is less than 768px or the height is less than 500px, the background of the container changes to a "grey" color.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Media Queries: max-width OR max-height</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f5f5f5;
        }
        h1 {
            color: #2c3e50;
        }
        h3 {
            color: #34495e;
            margin-bottom: 20px;
        }
        .container {
            background-color: aliceblue;
            width: 200px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: background-color 0.3s ease;
        }
        @media (max-width: 768px), (max-height: 500px) { 
            .container { 
                background-color: grey;
            }
        }   
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>CSS Media Queries: max-width OR max-height</h3>
    <div class="container">
        Box
    </div>
</body>
  
</html>

Output:

Example 2: The code demonstrates the usage of the media conditions "max-height" and "max-width" with "or" as well as "and" conditions. The "min-width" and "max-width" are with the "and" condition and with that whole condition the "max-height" is in the "or" condition with both the width values. So when the width is between 600px and 900px or the height is less than 500px the second box is hidden.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Media Queries: max-width OR max-height</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f5f5f5;
            color: #2c3e50;
            text-align: center;
        }
        h1 {
            color: #27ae60;
        }
        h3 {
            color: #34495e;
            margin-bottom: 20px;
        }
        .container {
            display: flex;
            gap: 20px;
        }
        .box {
            background-color: lightgreen;
            width: 150px;
            height: 150px;
            margin: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: background-color 0.3s ease;
            font-size: 1rem;
        }
        @media (min-width: 600px) and (max-width: 900px), 
               (max-height: 500px) { 
            .box-2 { 
                display: none;
            }
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>CSS Media Queries: max-width OR max-height</h3>
    <div class="container">
        <div class="box box-1">First Box</div>
        <div class="box box-2">Second Box</div>
    </div>
</body>
  
</html>

Output:

CSS Media Queries - max-width or max-height

priyanshuchatterjee01

Improve

Article Tags :

CSS Media Queries - max-width or max-height

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?