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

css grid

P

@toasteater

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


Wasn't sure how to...

  • add the mini cart pic.
  • size the main add appropriately.

Community feedback

@ElaasriTarik

Posted

there are many ways to add the mini cart logo to your button: -try to put the button and the cart image/logo in one div container, style the div to your needs and make it relative, make the button inset to 100%(width and height) to cover the whole div area style it and position it as relative or leave it as it is, make the image/logo position absolute then position it where you want it. Don't forget to make the div's position relative or else the image will be out of flow to the next relative parent. I Hope i helped :)

0
Andrea 290

@MirMurr

Posted

Hey!

There is an alt text so you might have added the link incorrectly to your HTML code. In order to display images on the page the images and your index.html file should be located in the same folder.

Here is an example code from my code:

´´´ <img class="woman-desktop" src="./illustration-woman-online-desktop.svg" alt="computer"> ´´´

You should use the image tag and paste the link between the src"". It´s important that your HTML File and the image are in the same folder.

I hope it helps!

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