Design comparison
Solution retrospective
I found getting the alignments and left/right spacing the hardest.
I am mostly unsure of the flexbox items, though I got a good amount of practice in while making this document.
Additional divs have been recommended already. Are there any other tips for manipulating the positions of the elements?
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @RJ3605, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the
<picture>
tag instead of importing this as an<img>
or using a div withbackground-image
. Use it to place the images and make the change between mobile and desktop, instead of using adiv
orimg
and set the change in the css withdisplay: none
with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. 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 desktop + mobile.Check the link for the official documentation for
<picture>
in W3 SCHOOLS:https://www.w3schools.com/tags/tag_picture.asp
See the example below:
<picture> <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;"> </picture>
👨💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1
✌️ I hope this helps you and happy coding!
Marked as helpful2@RJ3605Posted about 2 years ago@correlucas Thank you for your comment! Sadly the link to your project was broken, but I was able to find it on your profile. You do a lot of good work. This was my first solo project, so I really appreciate the feed back. I have updated my solution, and it works much better. I did not make use of the picture tag this time, I plan to use it for future iterations and projects.
0 - @vaibhavbshetePosted about 2 years ago
The solution closely matches the design, congratulations.
- It seems like you have used both
@media only screen and (max-width:375px)
and@media screen and (min-width:376px)
. The styles in these blocks become exclusive to those conditions. This might not be needed. The style inside the media queried block usually overwrites the code outside it, if it applies to the same content. The usual advice is this: Design for mobile first, then use media queried blocks to overwrite specific parts of the style to suit wider screens. In some older browsers, media queries might not even be supported. The default style outside any media queries should make the page look good enough. Hence thinking of mobile first helps. - Check the break point. It needs not match the design file dimensions so closely. Try resizing your browser on desktop while the page is open. Add a break point around where the content starts going out of the window.
- The image looks distorted (stretched) on desktop. You need to look at the width and height properties on the image. Try either setting
width:auto
or addingobject-fit: cover
. - Have you tried the vertical align property? (Suggesting this only because you have asked other ways of manipulating positions.)
e.g., In case of the prices, the result you have achieved using flex could also be achieved using
vertical-align: middle
like so:
.prices { /* display: flex; */ margin-bottom: 20px; margin-top: 20px; } .price { display: inline-block; vertical-align: middle; /* padding-right: 20px */ } .original_price { display: inline-block; vertical-align: middle; margin-left: 20px; }
- There is no need to manually add spaces in the title 'perfume', use the
letter-spacing
property instead. - Look at how you can host images on github itself (since you are publishing on github pages) - it is as simple as including the image files in your repository and linking with relative addresses. The folder structure in the starter files is often useful and could be kept.
- Also, check if there was a cart icon file given in the starter files itself. Check to see if it needs to be coloured like the text and how you can colour it using css if needed.
- If you have fixed the html and accessibility issues, do re-evaluate the score by clicking on 'Generate New Report' on the report page.
Marked as helpful1@RJ3605Posted about 2 years ago@vaibhavbshete Thank you very much for your comment. Thanks to your help I was able to update my solution to fix most of the issues that were appearing. The new solution uses less code and is more functional than the original, and I was able to address all of the accessibility and html issues.
0 - It seems like you have used both
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