qr-code

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  Greetings Bayonle! There are some details that I would like to tell you:

  • Using position to order elements, in this case, would not be the most advisable. Instead you can use flex
  • It is recommended to use min-height and max-width instead of height and width
  • I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers
  • I leave you the task of researching the reset CSS and the box-sizing: border-box
  • I can only mention an accessibility issue, you can add a short description to your image with the alt attribute. More info
  • To center the content in the center of the screen, you can apply the following properties to your body (remove all position you no longer need):

  body {
       font-family: "Outfit";
       background-color: lightgray;
       min-height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       gap: 20px;
       margin: 0;
  }
  

  • To improve the semantics of your HTML, you can change your <div class="test"> to a <main class="test"> and the <div class="attribution"> to a <footer class="attribution">
  • You can remove your box class, with that, the image will occupy the corresponding width
  • Add a padding to give interior spacing to your card:

  .test {
       min-height: 450px;
       width: 300px;
       border-radius: 15px;
       background-color: white;
       padding: 16px;
  }
  

  Marked as helpful

  0

  ---

  

  Bayonle•60

  @bayonle2022Posted 11 months ago

  Thanks have made some corrections . am i to upload it again??@Blackpachamame

  1

  

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  @bayonle2022 No, you just update your repository and your live site will be updated shortly. If you want, you can then generate a new capture with the red button (GENERATE NEW SCREENSHOT).

  0