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

NFT preview card

Facundo 40

@1991facundo

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, hope you are doing fine.

I went all good during most of the project, but i couldnt make when it came to the active state of the picture. Every time i tried to make it "position:absolute" and the view icon wanted " position:relative" the picture got bigger than the whole card. I need some tips to fix it.

Thanks!

Community feedback

@Hamid210545

Posted

Hello there! You have done an amazing job...... but if you want to positioned a image over another image ...... you have to make the parent div (position: relative) and child div (position: absolute) and on click the second image should disappear and you can done it with the help of css property (display: none).... hope this would solve your problem.... if you have further questions .... you can ask ..... Feel free to share with me........................... Thanks!

Marked as helpful

0

Facundo 40

@1991facundo

Posted

@Hamid210545

Thanks for the reply! but when i do that everything lost the proportions and the image got bigger than the entire card.

0

@Hamid210545

Posted

@1991facundo .... The image must be in a div and that div has to be certain width then the image will not go outside the box ....

Marked as helpful

0
Facundo 40

@1991facundo

Posted

@Hamid210545 Hello!, thanks for the clarifications, i saw yesterday you answered my question but now its not here, can you reply again? Thanks!

0

@Hamid210545

Posted

@1991facundo It is above the very first comment of mine .... any way i hope my comment solve your question ... if you still have doubt ... you can ask me anything which i have learnt then i will definitely help you ...... Thanks

Marked as helpful

0
Facundo 40

@1991facundo

Posted

@Hamid210545 SOrry, but still not working, any other advice?

0

@Hamid210545

Posted

@1991facundo .... Thank you for replying me .... Can you please look at my solution for that .... i have done this project you will easily understand your mistake and you will understand how to do it ...... And get back to me if you have any question... then?

Marked as helpful

1
Facundo 40

@1991facundo

Posted

@Hamid210545 i will! thanks

0
Facundo 40

@1991facundo

Posted

@Hamid210545 i got it, you used js for that, and im doing it only with html and css, maybe that why it was not working for me

0

@Hamid210545

Posted

@1991facundo oh thanks man.... Yes I use simple one line js code .... And solve my problem.... I am happy that your problem is solved....

0
sm7654 160

@sm7654

Posted

Hi, i started using this app yestarday. I download the files and then i noticed that my images sizes is larger then my defult size of my browser, and i have this problam in every project.

For example: my browser's defult width is 1349px and the background-image width is 1440px.

Because of that every time i want to start a project i get stuck with this problam.

I saw you did greate job making this project and i wanted to know if you can help me?

0

Facundo 40

@1991facundo

Posted

@sm7654 you should give at almost the start of your css the

img{max-width:100%} and gonna get the size you want for the section like

0
sm7654 160

@sm7654

Posted

@1991facundo thanks

0

@Hamid210545

Posted

@sm7654 The images in the download files have width of about 3000px ... you can right click on the image ... select open with (paint) and go to above (top left) ... you will see resize ... click on that and go to the ... pixels and then set the width you want .... i hope this will solve your problem..... you can ask me if you didn't get it.............. Thanks!

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