Skip to content
Submitted 14 days ago

Product-preview card component

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

What are you most proud of, and what would you do differently next time?
  • starting to get hang of responsive & fluid terminologies and incorporating them naturally.
  • making use of logical properties instead of regular physical ones.
What challenges did you encounter, and how did you overcome them?

I had a bit of trouble with using srcset with the img tag & couldn't get my primary image to switch to other image after the specified media query but with the help of the kind folks from the discord server (@AlexKMarshall) I understood the use cases of img and picture element & in the end switched to using picture tag and resolved it.

What specific areas of your project would you like help with?

I'd very much like if someone could point out what i could do better in all cases/in much more efficient ways to do things or just in general, things I could improve in my code. But specifically I want help with responsiveness & fluidness of text ect. stuff related to responsive design.

I'd appreciate any meaningful feedback. Thank you very much!

Community feedback

  • Yassin Amr•120
    @justXeeZPosted 14 days ago

    solution on point! if you could, please let me how did you get the sizes so right?

    0
    frost3dWave•190
    @frost3dWavePosted 14 days ago

    @justXeeZ thank you! This was more likely just a fluke, I wouldn't try to chase such pixel perfect sizes but what Happened here was, as I started the project with a mobile-first (on 320px device size) & once I was satisfied with the outcome, & moved to desktop, I noticed that the overall height didn't really change & the width just doubled, which the image all the newly added width & the product description grew to fill the original space.

    So what I did here was, I checked the final size of the entire card (with browser's inspect)k from earlier completed mobile desgin & merely multiplied it on the required media query. (You can check the code there which is exactly this) & merely adjusted the font & padding a bit until I achieved a similar look.

    Again, I wouldn't bother with trying to get a solution pixel perfect according to design, just similar in general is more than good enough

    1
    Yassin Amr•120
    @justXeeZPosted 14 days ago

    @frost3dWave they kept saying start with the mobile size design first but i didn't really bother doing it until i actually tried, i guess it is the right approach, anyway thanks for the help😊

    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