SCSS FTW on my latest bug

Hey everyone! It's my first post ๐Ÿ˜€

Iโ€™ve been trying to improve my CSS for the longest time, and I was fortunate enough to find as the perfect platform to do so. It has lots of projects in different skill levels that you can practice with and add to your portfolio. If you are trying to get out of the tutorial loop, I highly recommend to check it out. Hereโ€™s how I worked out one of the major issues I ran into with the latest project I worked on.

Frontendmentor submission page:

Screen Shot 2020-10-30 at 12.05.53 PM.png


I compared the differences between the layouts and note that thereโ€™s a left and right margin going through the entire page. The hero and the footer containers however, spans the entire screen width with their contents inside these margins, so I canโ€™t just place the whole page in one wrapper. The hero also has that photo that overflows vertically on desktop view.

The problem

My go-to solution for these kinds of layout is to place all the contents inside a container class:

.container {
   width: 90% //prevents it from touching the left and right gutter
   max-width: 110rem //keeps it fluid
   margin: 0 auto //horizontal centering

I tried this out initially and though it did work, it gave me another issue with the mobile layout.

Screen Shot 2020-10-30 at 1.02.52 PM.png

The wavy background patterns also look a little odd floating around as is instead of touching the edges of the browser.

My first instinct is to ditch the container solution for the header and apply appropriate paddings. While itโ€™s a completely valid approach, I think it would result to more media queries for larger screens, since Iโ€™m always lining it up with the rest of the page. Iโ€™d like to try to be consistent with the margins, so I had to think of another route. How do I customize the container div without affecting its use on the rest of the page?


The answer came to me while eating adobo (a popular Filipino dish). Iโ€™m using SCSS for this project, so why not take advantage of NESTING. The container is nested under .hero, so I targeted that specific container only and for smaller screens, set it at full width:

.hero {
  //styles here
  .container {
   @media screen and (max-width: 767px) {
      width: 100%;
} (2).gif

Pretty neat!

Comments (2)

ApplePieGiraffe's photo

Hey, Emmilie! ๐Ÿ‘‹

It's ApplePieGiraffe (from Frontend Mentor)! ๐Ÿ˜

I saw your blog on Twitter and just came here to check it out!

This article was a nice, short read that I enjoyed (I happen to be working on this very challenge at the moment, so this was very helpful). ๐Ÿ˜†

Keep it up! ๐Ÿ‘

Happy blogging (and coding, too, I suppose)! ๐Ÿ˜‰

Emmilie's photo

Hey APG! Haha awesome to see you here ๐Ÿ˜ƒ Thanks so much for the comment and for reading! Great to know that the article contributed in some way to your project. I'll be sure to look out for your submission ๐Ÿ‘