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 Frontendmentor.io 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.

Live: insure-landing-page.emestabillo.now.sh
Github: github.com/emestabillo/insure-landing-page
Frontendmentor submission page: frontendmentor.io/solutions/insure-landing-..

Planning

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.

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?

Solution

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

Pretty neat!