The max-width media feature is the opposite of min-width. It applies styles when the viewport width is less than or equal to the specified value. This is often used for a "desktop-first" approach or to apply specific styles only to smaller devices.
Example 1: Collapsing a Navigation Menu
/* Hiding the full navigation and showing a hamburger icon on smaller screens */
.desktop-nav {
display: flex; /* a one-dimensional layout method for laying out items in rows or columns */
}
.mobile-nav-icon {
display: none; /* Hidden by default */
}
@media (max-width: 799px) {
.desktop-nav {
display: none; /* Hide the full nav */
}
.mobile-nav-icon {
display: block; /* Show the hamburger icon */
}
}
Explanation
This code displays a standard desktop navigation. When the screen size is 799px or less, it hides the desktop navigation and shows an icon for a mobile menu.
Example 2: Stacking Columns
/* Forcing grid items to stack vertically on smaller screens */
.grid-container {
display: grid; /* a two-dimensional grid-based layout system */
grid-template-columns: 1fr 1fr; /* Two columns by default */
}
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr; /* Single column layout */
}
}
Explanation
Initially, .grid-container is a two-column grid. For viewports 600px wide or smaller, the layout changes to a single column, which is better for vertical scrolling on mobile devices.
Example 3: Reducing Margins
/* Decreasing the body margin on small screens to maximize content space */
body {
margin: 40px; /* Default margin for larger screens */
}
@media (max-width: 480px) {
body {
margin: 15px; /* a CSS property that defines the margin area on all four sides of an element */
}
}
Explanation
This CSS reduces the body's margin from 40px to 15px on screens with a maximum width of 480px. This gives more screen real estate to the actual content on smaller devices.
Example 4: Hiding Non-Essential Elements
/* Hiding a decorative sidebar on mobile devices */
.decorative-sidebar {
display: block; /* Visible by default */
}
@media (max-width: 900px) {
.decorative-sidebar {
display: none; /* Hide for screens 900px and smaller */
}
}
Explanation
The .decorative-sidebar is hidden on screens that are 900px wide or less. This is a common technique to declutter the interface on smaller devices by removing non-critical elements.
Example 5: Full-Width Buttons
/* Making call-to-action buttons full-width for easier tapping on mobile */
.cta-button {
width: auto; /* Default width */
}
@media (max-width: 500px) {
.cta-button {
width: 100%; /* a CSS property that defines the width of an element */
padding: 15px 0; /* a CSS property that is a shorthand for defining the padding on all four sides of an element */
}
}
Explanation
On screens up to 500px wide, call-to-action buttons will span the full width of their container. This makes them easier to see and tap on mobile devices.
Example 6: Simpler Footer
/* Displaying a simplified footer on small screens */
.detailed-footer {
display: block; /* Visible by default */
}
.simple-footer {
display: none; /* Hidden by default */
}
@media (max-width: 767px) {
.detailed-footer {
display: none; /* Hide the detailed footer */
}
.simple-footer {
display: block; /* Show the simple footer */
}
}
Explanation
This example allows for two different footer versions. The detailed footer is hidden, and a simpler one is shown on screens with a maximum width of 767px.
Example 7: Font Size Reduction
/* Reducing heading font sizes on mobile to prevent text wrapping issues */
h1 {
font-size: 3rem; /* a CSS property that defines the font size of a text */
}
@media (max-width: 400px) {
h1 {
font-size: 2.2rem; /* a CSS property that defines the font size of a text */
}
}
Explanation
To improve the text layout on very narrow screens, the font size for <h1> elements is reduced when the viewport is 400px wide or less.