Design comparison
Solution retrospective
Tips on how to shorten css please. Trying to use sass always ends in lengthy files
Community feedback
- @emestabilloPosted almost 4 years ago
Hi @Khallekan, you could break down your sass using the 7-1 pattern as stated here, or a modified version of it. The number of files you end up with usually depends on the scope of the project. Starting mobile-first is also another way to write less lines of code.
Here are a few more thoughts:
-
For the layout, the header is throwing me off a bit. It might be better to set background-size to
cover
instead of the current height, width, and bg-size. -
At medium widths, especially near the breakpoint 1023px, the size of the elements needs to be controlled a bit more as they appear quite massive.
-
Good job with flex with the gallery, but sometimes it leaves a noticeable empty column on the right (ex. around 1150px) while waiting for the next image to fit.
-
There's a bit of shifting of other elements when the
SEE ALL
button is hovered on because of the removal of border. You can instead leave the border and just change its color to the bg-color of the button when hovered if you want the colors to match.
Hope this helps :-)
1@KhallekanPosted almost 4 years ago@emestabillo Thank you! I will read up on the 7-1 pattern as I have no idea what it is. As for the rest of your suggestions I will take note of them and implement Thanks again!
1 -
Please log in to post a comment
Log in with GitHubJoin 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