Scaling Design: Implementing Responsive Media Queries in Vivero Verde Paisaje

In the Vivero Verde Paisaje project, we recently shifted our focus toward improving the platform's visual accessibility and responsiveness across various devices. As a green-focused landscape design platform, it is crucial that our interface remains as clean and organized as the projects we showcase, regardless of whether a user is viewing them on a desktop monitor or a mobile screen.

The Problem: One-Size-Fits-All Styles

Previously, our stylesheets were largely static. Elements were defined with fixed widths and spacing that looked great on large screens but caused layout breakage or awkward overflow on smaller, mobile displays. The lack of fluid adjustment forced mobile users to zoom in and scroll horizontally, creating a disconnected experience.

The Shift: Embracing Responsive Design with Sass

We decided to move away from hard-coded values and transition to a more structured approach using Sass. By leveraging media queries, we could define breakpoints that instruct the browser to rearrange content based on the viewport width.

Instead of rewriting code, we adopted a clean approach that maintains readability using the SCSS syntax:

$mobile-breakpoint: 768px;

.gallery-container {
  display: flex;
  flex-direction: row;
  gap: 20px;

  @media (max-width: $mobile-breakpoint) {
    flex-direction: column;
    gap: 10px;
  }
}

Why This Approach Matters

By modularizing our styles with Sass variables and nested media queries, we achieved two main things:

1. Maintainability: When the design system needs an update, we only change a variable rather than hunting down every instance in a massive CSS file.
2. Performance: By keeping our media logic close to the component definitions, the CSS output remains predictable, and we avoid the "global style soup" that often plagues growing projects.

The Technical Takeaway

Responsive design is not just an "add-on"—it is a core architectural requirement. Start by identifying your most common breakpoints (mobile, tablet, desktop) and use preprocessor variables to keep those values consistent across your entire codebase. This keeps your styles DRY (Don't Repeat Yourself) and makes your layout adjustments feel effortless.

Generated with Gitvlg.com