Design comparison
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
- @Hamid210545Posted about 2 years ago
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 helpful0@1991facundoPosted about 2 years ago@Hamid210545
Thanks for the reply! but when i do that everything lost the proportions and the image got bigger than the entire card.
0@Hamid210545Posted about 2 years ago@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 helpful0@1991facundoPosted about 2 years ago@Hamid210545 Hello!, thanks for the clarifications, i saw yesterday you answered my question but now its not here, can you reply again? Thanks!
0@Hamid210545Posted about 2 years ago@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 helpful0@1991facundoPosted about 2 years ago@Hamid210545 SOrry, but still not working, any other advice?
0@Hamid210545Posted about 2 years ago@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 helpful1@1991facundoPosted about 2 years ago@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@Hamid210545Posted about 2 years ago@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 - @sm7654Posted about 2 years ago
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@1991facundoPosted about 2 years ago@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@Hamid210545Posted about 2 years ago@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 GitHubJoin 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