Skip to content
Submitted about 1 year ago

Responsive Design, working mobile firts

Rocko•20
@rockop11
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

I didn't find a specific difficulty since I have knowledge of HTML and CSS, but I wanted to refresh my understanding of the concepts.

I think I would like feedback on the folder structure in a small project where there's only HTML, CSS, and images.

Yes, I'd like to know how to optimize CSS. I tried to keep it as simple as possible by using only classes, but I found myself needing to add classes to more elements in the HTML than I would have preferred.

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,120
    @MelvinAguilarPosted about 1 year ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • Apply borders to the container, not individual images or components. Use overflow: hidden on the container to clip excess from the image for a similar effect.
    • Optimize image loading using the <picture> tag for different versions. Example: 
      <picture>
    <source media="(min-width: 460px)" srcset="./images/image-product-desktop.jpg">
    <img src="./images/image-product-mobile.jpg" alt="{your alt text goes here}">
</picture>
    • Use relative units like em or rem for font-size instead of pixels. Resource 📘
    • Prefer min-height: 100vh over height to avoid cutting off components on smaller screens.

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    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