Submitted 3 months ago

Meet Landing Page using Sass/SCSS, Flexbox, and Media Queries

MAGENE Sem Joel•320

@Jomagene

Preview site View code

This is a solution for...Meet landing page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am most proud of the clean and efficient responsive design, which was achieved using a combination of Sass/SCSS for modular styling, Flexbox with wrap property for layout management, and a mobile-first design approach. Next time, I might explore using CSS Grid in combination with Flexbox for even more flexible and complex layouts, and consider implementing mixins in Sass to simplify and reuse media queries.

What challenges did you encounter, and how did you overcome them?

One challenge was ensuring that the layout and images adapted perfectly across various screen sizes. I used media queries to handle different breakpoints effectively and applied Flexbox to maintain consistent alignment and spacing.

What specific areas of your project would you like help with?

I would appreciate feedback on optimizing my Sass/SCSS structure, especially around organizing media queries and potentially integrating mixins for better reusability.

Community feedback

Micha Huhn•200

@MichaHuhnPosted 3 months ago

The native CSS media queries don't support variables unfortunately. That's why I came up with a custom SCSS solution to organize media queries and breakpoints.

When I create a new project, I always paste this _media-queries.scss file into the project:

@use 'sass:math';

$breakpoint-tablet-min: 550px;
$breakpoint-laptop-min: 1100px;
$breakpoint-desktop-min: 1500px;

$font-size-base: 16px;

$tablet-and-bigger: '(min-width: #{math.div($breakpoint-tablet-min, $font-size-base)}rem)';
$laptop-and-bigger: '(min-width: #{math.div($breakpoint-laptop-min, $font-size-base)}rem)';
$desktop-and-bigger: '(min-width: #{math.div($breakpoint-desktop-min, $font-size-base)}rem)';

It's inspired by Josh Comeau:

With this approach you can define pixels as breakpoints and convert them to rem.
The breakpoints are in areas with few devices, so each category (mobile, tablet, laptop, desktop) has the same experience.
The media queries can be called tablet-and-bigger, ...

Then I use these media queries in the following way:

/* import `_media-queries.scss` file here */

div {
  padding: 1rem;

  @media #{$tablet-and-bigger} {
    padding: 1.5rem;
  }

  @media #{$laptop-and-bigger} {
    padding: 2rem;
  }

  @media #{$desktop-and-bigger} {
    padding: 2.5rem;
  }
}

My SCSS folder structure is inspired by this YouTube video.

MAGENE Sem Joel•320

@JomagenePosted 3 months ago

@MichaHuhn

Thank you for sharing this approach! I wasn't aware that breakpoints could be handled this way using SCSS variables. It's insightful to learn that media queries can be organized and converted to rem units like this. I'll definitely explore this method in my future projects. Thanks again for the valuable tip! 🫡

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord