Design comparison
Solution retrospective
I would like to hear your feedback! π
Community feedback
- @DavidMorgadePosted about 2 years ago
Hello Aman, great job getting the solution for the challenge, congratulations!
If you don't mind, I would like you to give a little tip regarding your media queries.
-
It seems that you are using
display: none
to hide yourmain
and rendering a new main for mobile, instead of that just try to style your already structured html file to get it to work on diferent sizes, you can try for example using a Mobile first approach (building first for mobile and then for desktop). -
Also you are using a
@media(max-width: 375px)
, this will only target sizes from 0 to 375px, it will miss the mayority of mobile screens, try setting up it until@media(max-width: 768px)
instead, this will target all kind of mobile screens, and shift correctly on desktop mode!
Hope my feedback helps you!, if you have any question, don't hesitate to ask! Good job!
Marked as helpful1 -
- @correlucasPosted about 2 years ago
πΎHello Aman, congratulations for your new solution!
Great solution and great design, something you can improve to get closer to the challenge output is the font-size and the image color. The heading h1 is around 32/36px and the paragraphs 16px/18px.
To have the same effect of the challenge on the image making it purple use
mix-blend-mode:multiply
with an opacity around 80%.βοΈ I hope this helps you and happy coding!
Marked as helpful0 - @milandsharmaPosted about 2 years ago
Awesome webpage brother
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