Submitted over 1 year ago
Product Preview Card Solution (Responsive, Grid, Flex, HTML, CSS)
@SalahShadoud
Design comparison
SolutionDesign
Community feedback
- @Kamlesh0007Posted over 1 year ago
Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. You need to add some code in body tag to make the container center
Here's an example code snippet:
body { min-height: 100vh; // instead of min-height:150vh display: flex; text-align: center; align-items: }
1@SalahShadoudPosted over 1 year ago@Kamlesh0007
- the
min-height: 150vh
was for the mobile version (300px width screen) of the web page and in the media query i adjusted themin-height
property to take 100vh. - i made this move because my
attribution
div was floating randomly in the mobile version but i already solved the problem in the other challenges by letting it set in the top of the page. - I centered the container with
grid
instead offlex
. thnx for reviewing my solution & happy coding <3
0 - the
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