@caarlosdamianSubmitted almost 2 years ago
Feedback is always welcome , can you shared best practices to styling with scss that should be a really good help
P
J Cooper
@jefcooperAll comments
- @jefcooperPosted almost 2 years ago
I encountered a small problem with dark mode. It looks like when the page is first displayed without a search, then if you switch to dark mode, the bottom portion of the page remains white. Guessing that's the body background showing through, maybe set the body background-color to theme background.
Steps to reproduce:
- load page in browser (see light mode by default and empty search)
- switch to dark mode without entering any search.
Results in white section under search bar.
1 - @FabricioDagSubmitted almost 2 years ago
Simple html/css project hope it helps
@jefcooperPosted almost 2 years agoI see your version is darker than the design. I had this problem too and it's easy to solve. If you set the image to have opacity: 70% then it lightens up and matches the design exactly.
1 - @kabocha23Submitted almost 2 years ago
As a new developer I'm open to feedback on all areas of code, where I can improve, best practices, etc. I am still refining my skills using pure css to create responsive designs for mobile, tablet, desktop. Thanks!
@jefcooperPosted almost 2 years agoI have also completed this one recently. What I notice immediately with your solution is a problem I had as well. The top section and bottom section don't stay nicely aligned like in the design pictures. To address this, I went with grid which allowed me to create a tiled structure like:
aabb cdde
which I then rearranged to a column:
a b c d e
on mobile. I think this can still work with the react component approach except that you'll need some root level styles that define the grid-area specifications. See here:
https://www.frontendmentor.io/solutions/room-homepage--0m9xAUH-1 https://github.com/jefcooper/front-end-mentor/tree/main/room-homepage
0
