Design comparison
Solution retrospective
I'm pretty happy with it, but I can't fully understand something: 1. [FIXED] How to make site look nice when zooming in and out?
2. Why 'object-fit' didn't work on desktop version?
- I had to set up the height manually.
Thank you!
Community feedback
- @Adel-HarratPosted over 1 year ago
Hello and congratulations on completing this challenge! 🎉✨
I have downloaded your code and made some modifications that I believe will make your solution even better. Here are the changes:
-
Change the
<h1>
tag to a<div>
tag (line 33). -
Comment out the attribution code because it is ruining the alignment of the card.
-
Remove the
margin: 200px 400px;
from the.main-page
CSS. -
Add the following CSS to the body:
body { display: grid; place-items: center; min-height: 100vh; }
- Add the following CSS to the top of the general.css file:
* { margin: 0; padding: 0; box-sizing: border-box; }
- Change the
width
property tomax-width
in the.main-page
CSS:
.main-page { max-width: 1087px; }
-
Add the
.image-wrapper
class to the div that holds the images. -
Add
flex: 1;
to the.image-wrapper
CSS. -
Remove the
width
property from the.page-text
CSS. -
Add
flex: 1;
to the.page-text
CSS.
I didn't know how to make the image more responsive or why object-fit doesnt work
My github repo for this code : github.com
These modifications should enhance your solution. Let me know if you need any further assistance! 🎈
Marked as helpful1@BBualdoPosted over 1 year ago@Adel-Harrat Thank you so much! It helped a lot, I updated the solution. But it still has a small gap under the image, I don't know why.
If you could tell me as simple as possible, how to use 'flex: 1' property? :) I know what it does, but can't use it properly on my own.
0 -
- @Aimal-125Posted over 1 year ago
In your css code, use width property to 80% and in your desktop.css, you gave margin: 200px 400px; dont use margin property instead use justify-content: center; that is why it is not looking good on the thumbnail and on landscape orientation. And also give height of 100vh to .main-page class for desktop.css and 120 to 150vh to mobile.css by using media query with max-height: 500px;
Marked as helpful1
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