Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product-Preview-Card-Component

@UdbhavDalmia

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


First Question: I am having some problems vertically aligning items can someone help me with that?

Second Question: I uploaded all the images in the GitHub repository but still the images are not showing on the live site. Does someone know why?

Community feedback

@codesbyayush

Posted

Hey I have made the changes you asked question for in your repo and created a merge request. There would be a request with my name on your github repo. Checkout the changes and let me know if you have any questions on how it works.

I have made the body a grid layout to center the div in it.

I have changed the file location in src attribute to show images and explained the reason in my pull request.

Marked as helpful

1

@UdbhavDalmia

Posted

@codesbyayush thank you for helping and changing the code. I had one last question about how to make the site responsive I mean if I open it on a mobile phone it would suck so could you tell me a bit about that, could you brief me on the changes you made, please.

0

@codesbyayush

Posted

@UdbhavDalmia I made body a grid layout in earlier changes as grid have inbuilt style property to center items in it and I used it to center the card.

For travelling in folders we use slash so your img path earlier was "images/image-product-desktop.jpg" which says that go inside the images folder and find the file with the name after slash but there was no such folder in the directory so the images were not showing up and by removing "images/" we changed path to look in the current folder.

For making design responsive you can use media queries and you also have to change the main image to mobile version so for that you can use <picture> tag.

Marked as helpful

0

@UdbhavDalmia

Posted

@codesbyayush Thank you so much for your explanation and for clearing up my queries.

0
Fer 3,970

@fernandolapaz

Posted

Hi 👋,

🔹The images are not showing because you are using the wrong path. For some reason the image files are not in their original folders and therefore, as you have it, the correct path would be "image-product-desktop.jpg" instead of "images/image-product-desktop.jpg".

Please let me know if it helped you.

Regards

Marked as helpful

1

@UdbhavDalmia

Posted

@fernandolapaz Hi and thank you so much for helping.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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