Mobile First Technique #2

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 to max-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! 🎈

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;

And again, setting up width still looks weird here.