Skip to content
Submitted about 2 years ago

Responsive css using flexbox

kevin-houguet•90
@kevinhouguet
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

<picture> tag is fixed. breakpoint 768 is fixed.

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello @kevinhouguet, Congratulations on completing this challenge!

    Your solution its almost done and I’ve some tips to help you to improve it:

    You've done the design for the wrong image, when you download the starter files the folder comes with 3 files (preview card, desktop and mobile) you've created the solution based on the preview and you should consider only the mobile + desktop images.Remove the background-color from the container and add it to the body to make sure this color background will display it full screen.

    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
    0
    kevin-houguet•90
    @kevinhouguetPosted about 2 years ago

    @correlucas Hello ! thank you to have checked my code. Yes, i saw my mistake about the preview but too late. Thank you for your tips about picture. I don't know typicals html tag yet ^^ but it will come with experience. I'm return to my code to fix the issues. Thank you :D

    0
  • Aatypic•490
    @AatypicPosted about 2 years ago

    Salut et félicitations pour ta première solution ! Je me permets en francais c'est rare :)

    Pour ta question concernant le responsive, tu devrais mettre un break-point plus large actuellement tu es a 376px c'est assez bas sachant que toute la partie tablette est du coup ecrasé.

    Tu peux donc dire que la partie tablette, elle aussi aurait le même design que en mobile pour te faciliter le tout (genre 768px).

    Ensuite tu pourrais avoir les mêmes résultats visuelles avec un nombre moindre de <div> container. En effet les 2 divs parents de <main> pourrait être enlevées. Suffit ensuite de mettre display: flex sur le <body> pour centrer ta carte.

    Aussi je vois que tu charges l'image avec le css et surtout tu utilises une <section> uniquement pour l'image, c'est pas idéal. Il est conseillé de le faire via le html avec le tag <picture> pour un resultat comme ceci:

    <picture>
  <source media="(max-width: 768px)" srcset="images/image-product-mobile.jpg" >
  <img src="images/image-product-desktop.jpg" alt="..." >
</picture>

    Plus d'infos ici > https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

    Bonne chance à toi ✌️

    Marked as helpful
    0
    kevin-houguet•90
    @kevinhouguetPosted about 2 years ago

    @Aatypic Salut ! merci ^^ j'avais un peu d'appréhension à montrer mon code au début mais je suis content de l'avoir fait et je suis agréablement surpris d'avoir eu des retours :p Concernant la partie responsive en fait j'ai pas mis de breakpoint 768px car ca n'était pas demandé et j'étais surpris, mais je le mettrais systématiquement tu as raison c'est mieux pour l'xp user. A propos de la div, ce qui s'est passé c'est que je me suis basé sur la preview et non le design desktop xD j'avoue c'est mon premier challenge sur le site et j'ai pas fait attention. Mais je m'en suis rendu compte au commencement de mon deuxième challenge. Merci pour les conseils de picture. Je n'ai pas encore le reflexe sur les balises type que fournis html. Mais ca viendra avec l'expérience :p

    Encore merci je vais recheck mon code et faire les modifs.

    1

Please log in to post a comment

Log in with GitHub

Join 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