Skip to content
Submitted over 1 year ago

Product Preview Card

Petros Devrikis•380
@Petrosdevri
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

This is my solution for the Product Preview Card Component.

It was overall easy and enjoyable building this project, however I faced some difficulties regarding mobile responsiveness:

  • The main issue is adjusting text so that it fits the image appearing in the Mobile Design section. While I tried adding <br /> elements to meet the standards of Desktop Design, this solution is not feasible for responsive sizes and at the same time I am not sure what to do with the .product-title class so that it restructures automatically.
  • Secondly, I would like to learn about how to resize the component for mobile devices in general. The flex-wrap property doesn't seem to work as some settings get overriden by Bootstrap, therefore it's difficult to think of something else other than defining the size manually. You may also submit proposals on how to change classes in Bootstrap in order to achieve the most desirable result.
  • As for other things, it would be appreciated if you could suggest alternative solutions to fit the icon and text inside the <button> element as well as alternative font-sizes.

I would appreciate your feedback and would like to receive your comments and perspectives regarding the project. Thanks a lot!

Community feedback

  • Hassia Issah•50,650
    @HassiaiPosted over 1 year ago

    Replace <h3> and <h5> with <p> to fix the accessibility issue.

    To center .container on the page using flexbox or grid,

    • USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body
    body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
    • USING GRID: Add min-height:100vh; display: grid place-items: center to the body
    body{
min-height: 100vh;
display: grid;
place-items: center;
}

    For a responsive content, replace the width in .product preview with max-width and there is no need to give .product-preview and the img a height value rather give .product features a padding value for all the sides, this will prevent the content from overflowing.

    in the desktop design, give .product image and product features a width of 50% and the img a width of 100% in the media query give them a width of 100%.

    Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    Marked as helpful
    0

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