Design comparison
SolutionDesign
Solution retrospective
This is my 2nd Deployment using React. I want to ask why there is gap between Graphic design pic having cherry pic and Orange pic. and secondly please recomend me from which import, from where I can learn to add animations in projects like this. I am pretty much new in react game so don't hesitate to leave a comment. Thanks a lot !!
Community feedback
- @ChamuMutezvaPosted over 3 years ago
- add
display: block
to the images to clear the gap as per your question. Images are inline elements and will not fill their container without additional css
.twodivs img { display: block; object-fit: cover; width: 100%; /* max-height: 80vh; */ i have commented this code , see if it works /* min-height: 40vh; */ }
Marked as helpful0 - add
- @MrparasgediyaPosted over 3 years ago
Hello bro, i think here your header(first orange image) height is more then graphic design so your content after header is shifting with that increment of header height so you just need to reduce height of header or you can use vh to handle header height.
Marked as helpful0
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