Visitors may access your Super site from a desktop, tablet, or mobile device. Using CSS media queries, you can customize how your site looks on different screen sizes, ensuring a great experience no matter how it's viewed.
This guide introduces media queries and shows you how to create responsive layouts by targeting specific screen sizes.
What are media queries?
Media queries allow you to apply CSS only when certain conditions are met, such as the width of a visitor's screen.
For example, the following CSS applies only to screens that are 768px wide or smaller:
@media (max-width: 768px) {
/* Mobile styles go here */
}
This makes it easy to customize your site's layout for desktops, tablets, and mobile devices without affecting other screen sizes.
Common screen sizes
While every device is different, these breakpoints are commonly used when designing responsive websites.
Device | Recommended breakpoint |
Desktop | 1025px and above |
Tablet | 768px – 1024px |
Mobile | 767px and below |
Tip: These breakpoints are guidelines. Always preview your site on multiple screen sizes to ensure the best experience.
Customize layouts for different devices
You can create different styles for desktops, tablets, and mobile devices using media queries.
/* Desktop */
@media (min-width: 1025px) {
.super-content {
max-width: 1200px;
}
}
Tablet
@media (min-width: 768px) and (max-width: 1024px) {
.super-content {
padding: 0 2rem;
}
}
Mobile
/* Mobile */
@media (max-width: 767px) {
.super-content {
padding: 0 1rem;
}
}
Hide elements on mobile
You may want to hide decorative elements or content that isn't essential on smaller screens.
For example:
@media (max-width: 767px) {
.hero-image {
display: none;
}
}Note: Hiding an element with CSS only removes it visually. The element is still loaded by the browser.
Adjust spacing for smaller screens
Spacing that looks great on a desktop may feel too large on mobile devices.
Use media queries to reduce margins, padding, or gaps for a more comfortable mobile layout.
@media (max-width: 767px) {
.super-navbar__item-list {
gap: 1rem;
}
}
Stack columns on mobile
Multi-column layouts often work best on larger screens but can become difficult to read on mobile devices.
You can stack columns vertically using media queries.
For example:
/* Desktop */
.two-column-layout {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
/* Mobile */
@media (max-width: 767px) {
.two-column-layout {
grid-template-columns: 1fr;
}
}