Hupspot Guide to CSS Media Queries

Designing responsive pages for your Hubspot projects depends on how well you understand CSS media queries. With the right query structure, you can adapt layouts, typography, and components to fit any device width while keeping performance and usability in focus.

This tutorial adapts the core concepts from the original media queries guide on the HubSpot customers blog, and translates them into a practical, easy-to-follow reference you can use in day-to-day work.

What Are CSS Media Queries in Hubspot Projects?

Media queries let you apply CSS conditionally, based on characteristics like viewport width, height, orientation, or resolution. When you build emails, landing pages, or website themes for Hubspot, media queries control how each component responds as screen sizes change.

In practice, a media query looks like this:

@media only screen and (max-width: 768px) {
  .hero-text {
    font-size: 1.4rem;
  }
}

The browser checks the condition inside the parentheses. If the condition is true, it applies the CSS block. This mechanism is the core of responsive design across sites built with or without Hubspot.

Core Building Blocks of a Media Query

Every media query in your Hubspot templates or stylesheets includes three key parts:

• Media type – usually screen for modern websites.
• Media features – such as min-width, max-width, or orientation.
• Logical operators – for combining conditions with and, commas, or not.

Example using these pieces together:

@media screen and (min-width: 1024px) {
  .layout-sidebar {
    display: block;
  }
}

This helps you define clear layout changes in Hubspot themes as screen sizes increase.

Choosing Breakpoints for Hubspot Layouts

Good breakpoints reflect where your layout naturally needs to shift, not just popular device sizes. However, many Hubspot designers start with common width ranges and refine them based on analytics and real usage.

Typical Responsive Breakpoints

• Small screens: up to 480px (phones in portrait)
• Medium screens: 481px to 768px (large phones and small tablets)
• Large screens: 769px to 1024px (tablets and small laptops)
• Extra-large screens: 1025px and above (desktops and wide monitors)

You might see these breakpoints reflected in Hubspot stylesheets using a pattern like:

@media (max-width: 480px) { /* mobile */ }
@media (min-width: 481px) and (max-width: 768px) { /* phablet */ }
@media (min-width: 769px) and (max-width: 1024px) { /* tablet */ }
@media (min-width: 1025px) { /* desktop */ }

Mobile-First CSS Strategy in Hubspot

A mobile-first approach means writing your base CSS for smaller screens, then layering larger-screen changes with min-width queries. This method works especially well for Hubspot pages, which often receive significant mobile traffic.

Steps to Implement Mobile-First Styles

1. Start with global styles

   Write default styles that look great on small screens without any media queries.

2. Add progressive enhancements

   Introduce layout changes only when the viewport is wide enough.

   .card-grid {
     display: block;
   }
   
   @media (min-width: 768px) {
     .card-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 1.5rem;
     }
   }

3. Test across Hubspot modules

   Verify that repeated modules, such as blog listings or CTA sections, remain readable and functional at each breakpoint.

Practical Hubspot Media Query Examples

Below are examples you can adapt for Hubspot landing pages, blog templates, or system pages.

1. Responsive Typography

Keep headlines readable on every device while maintaining a consistent hierarchy.

h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 3rem;
  }
}

2. Stacking and Unstacking Columns

Use media queries to control when Hubspot columns move from stacked to side-by-side.

.two-column {
  display: block;
}

@media (min-width: 768px) {
  .two-column {
    display: flex;
    gap: 2rem;
  }
}

This pattern improves readability on mobile while taking advantage of horizontal space on tablets and desktops.

3. Controlling Navigation Behavior

Hubspot menus often switch between a hamburger icon on small screens and a full navigation bar on larger screens.

.nav-desktop {
  display: none;
}
.nav-mobile {
  display: block;
}

@media (min-width: 992px) {
  .nav-desktop {
    display: flex;
  }
  .nav-mobile {
    display: none;
  }
}

Testing Media Queries in Hubspot Workflows

Once you have written your media queries, you need to test them thoroughly within Hubspot or in your preferred development environment.

Recommended Testing Checklist

• Use browser developer tools to simulate common device widths.
• Check layouts in both portrait and landscape orientations.
• Review actual Hubspot pages on multiple physical devices when possible.
• Confirm that core actions, such as form submissions and CTA clicks, remain easy on every screen size.

Consistent testing ensures that style changes triggered by media queries do not conflict with Hubspot scripts or modules.

Performance and Maintainability Tips

Well-organized media queries keep your Hubspot stylesheets easy to read and maintain as your site grows.

Best Practices

• Group related rules by component to prevent scattering styles across files.
• Avoid duplicate breakpoints that do the same job in several different areas.
• Document major breakpoints so your entire team understands where layout shifts occur.
• Minimize overly complex conditions that make debugging difficult.

To further optimize your overall digital strategy around responsive design and Hubspot implementations, you can also consult specialists such as Consultevo for broader architectural guidance.

Next Steps: Deepening Your Media Query Skills

Media queries form the backbone of responsive design, and mastering them is essential for any developer or marketer working with Hubspot themes and templates. As you refine your skills, experiment with different breakpoint strategies and continue to review real visitor behavior to guide your layout decisions.

For deeper technical examples, patterns, and extended explanations about media queries, study the original tutorial on the official HubSpot media query guide. Combine those concepts with the practical steps above and you will be able to create flexible, performant, and accessible experiences across all of your Hubspot-powered assets.