Skip to content
Submitted 4 months ago

Responsive product preview card

P
WajahatAli130•90
@WajahatAli130
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?

I really like how I managed to make it somewhat responsive.

What challenges did you encounter, and how did you overcome them?

I really struggled to figure out how to make it responsive and it took me much longer than previous challenges, even though it's a fairly simple project. Eventually figured it out by researching on Google and Youtube.

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

I'm still not satisfied with the desktop version. The image doesn't cover the whole area that it should and I don't know how to fix this. I also feel like my code is too messy.

Community feedback

  • Dylan Heslop•2,340
    @dylan-dot-cPosted 4 months ago

    Hey bro Good solution. Currently on my phone so not much I can do but there are actually 2 images, a mobile version and a desktop version.

    You need to use the right one at the right place

    I suggest you search up the picture elements in HTML and it can help you.

    0
    P
    WajahatAli130•90
    @WajahatAli130Posted 4 months ago

    @dylan-dot-c I have tried using the picture element, but it doesn't seem to work, it just show the alt text associated with the img element.

    0
    Dylan Heslop•2,340
    @dylan-dot-cPosted 4 months ago

    @WajahatAli130 you need to research how it works...

    It uses multiple tags and you need the desktop version of the picture as well... It's given in the folder

    So it's like

    <picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

    Something like that bro

    0
    P
    WajahatAli130•90
    @WajahatAli130Posted 4 months ago

    @dylan-dot-c I have tried this, but when I get to the srcset part, it doesn't let me select any folders or files like it does when I use the img element src. I'm not sure if I'm expressing myself crearly. What exactly do I put in after srcset=?

    0
    P
    WajahatAli130•90
    @WajahatAli130Posted 4 months ago

    @WajahatAli130 also how do i get rid of the empty white space below the beige area?

    0
    Dylan Heslop•2,340
    @dylan-dot-cPosted 4 months ago

    @WajahatAli130 ok so for the beige area, you should move the background color from the main and put it on the body. If it's on the main on that will have the bg but since it's a screen/full page background color it's best to put it on the body.

    Marked as helpful
    0
    Dylan Heslop•2,340
    @dylan-dot-cPosted 4 months ago

    @WajahatAli130 meaning it's not showing auto complete?

    If that's the case, you don't need auto complete just make sure the image is in your project folder and trial and error until you get it right

    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