Responsive product page using HTML, CSS Grid and Flexbox
Design comparison
Solution retrospective
During the project I had issues with responsive things, like creating horizontal scroll automatically. So, please if you can check my project out and help me to improve my project, I will apreciate it.
note: I'm Brasilian and my english is in improving process, sorry about any mistake.
Community feedback
- @HassiaiPosted almost 2 years ago
There is no need for <a> within the <button>, remove that to fix the error issue with the code. it should <button><img>Add to cart<button> in the css you give the button a cursor value of hover.
There is no need to give the img inline css. Reduce the max-width value of .container. e.g
max-width: 600px;
To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
give the main a grid-template column of 1fr 1fr. Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units. click here
In the media query, reduce the font-size of the text , give the button a border-radius and the mobile image is not visible. To make the mobile image visible, add the image to the html file. in the desktp design, give it a display: none; in the media query declare it as display: block; .
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful2@WellingtonMarques96Posted almost 2 years ago@Hassiai thank you !!! I've fixed the code following your tips !! I hope now it's better.
You were awesome!
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