Mobile First Technique #2

Community feedback

• 

  Adel•820

  @aliadelharrat

  Posted almost 2 years 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 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! 🎈

  11

  Marked as helpful
• 

  Aimal Khan•2,260

  @Aimal-125

  Posted almost 2 years 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;

  10

  Marked as helpful
• 

  BBualdo•540

  @BBualdo

  Posted almost 2 years ago

  And again, setting up width still looks weird here.

  00