Submitted about 5 years ago

Mobile First w/Sass

@deG3nt3lm4n

A solution to the Fylo data storage component challenge

Solution retrospective

I know my CSS may be a little.... messy please let me know whats up. i used a SASS compiler but at the same time just let me know how you feeel about it.. trying to get better.. feel like next challange i think i may be able to make it more readable for you guys as well....

At the same time if you wanna be friends let me know :)

Code

Please log in to post a comment

Community feedback

Account deletedPosted about 5 years ago
Hello again.

For the background, you can set the height of the html and body elements to 100% and use the ::after pseudo-element
```
html, body {
   height: 100%;
}

body {
   background-color: <--- here goes the dark blue background color
   position: relative;
}

body::after {
    content: "";
    width: 100%;
    height: 50%;
    background-image: url(../images/bg-mobile.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    background-position: bottom;
    bottom: 0;
    left: 0;
    z-index: -1;
}

@media (min-width: 768px) {
    background-image: url(../images/bg-desktop.png);
}
```
It goes something like that, you may have to tweak some things.

You may also want to check this article about CSS naming conventions; really important in collaborative work when you're doing open-source or simply working in a company with more developers on the same project.

I saw you started using more classes and less nesting, that's very good!
thatClassyDude•85
@deG3nt3lm4n
Posted about 5 years ago
Wow realized that the background dosent match that well.... im sorry

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