To solve this problem, I used only html and css, I'm open to criticism
Design comparison
Solution retrospective
I'm starting, I found some difficulties, and I had to research a lot to adapt some and be able to apply responsiveness between desktop and mobile, it wasn't perfect, but I believe it's a good start, I'm open to criticism and suggestions, thank you
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Joseildo, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
Using
<picture>
you’ve more control over the elements and its better than using the product image as<img>
orbackground-image
. Look that for SEO and search engine reasons it isn't a better practice to import this product image with CSS since this will make it harder to the image. You can manage both images inside the<picture>
tag and use the html to code to set when the images should change setting the devicemax-width
depending of the device (phone / computer) Here’s a guide about how to usepicture
:https://www.w3schools.com/tags/tag_picture.asp
✌️ I hope this helps you and happy coding!
Marked as helpful0 - @hyrongennikePosted about 2 years ago
Hi @Josnjs,
Nice job on completing the challenge
Just a few suggestions, instead of using padding to try and center the card you can use flexbox, replace you body rule with the following.
body { background-color: hsl(30, 38%, 92%); margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }
and set the footer
margin-bottom: 0
.Also just check the report above there are a few issues they are usually easily to fix.
Hope this is helpful. Let me know if you have any other questions.
Marked as helpful0 - @AlanLopReyPosted about 2 years ago
Good first attempt I recommend you to start the design with the mobile first methodology, and set the image in the CSS document with the background-image property and the url() function in you're case it will be something like background-image: url(images/image-product-mobile.jpg); if you don't see the image appear you need to give it a width I hope I've been helpful ;) don't give up
Marked as helpful0
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