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 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!
A budding frontend designer/developer!
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)! ๐
Comments (2)