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.

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;  }}