Product Preview Card Using Flexbox and @media

Community feedback

• 

  Lucas 👾•104,340

  @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 with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: 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 device max-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 helpful

  2

  ---

  

  Ronald Sayre•260

  @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
• 

  Vaibhav Shete•150

  @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 adding object-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 helpful

  1

  ---

  

  Ronald Sayre•260

  @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