CSS Grid for responsive page, Flexbox to add text & img in single line

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  • 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:

  * {
      margin: 0;
      box-sizing: border-box;
  }
  

  • You can apply display: block to the image to remove the white space generated underneath
  • I leave you the task of researching the reset CSS and the box-sizing: border-box
  • If you want to center the content in the center of the screen and keep the footer below it, you can apply these changes to your body:

  body {
      font-family: "figtree";
      background: hsl(47, 88%, 63%);
      display: grid;
      grid-template-columns: repeat(16, 1fr);
      grid-template-rows: 1fr auto; /* new */
      min-height: 100vh; /* new */
  }
  

  To improve semantics, you can change the following:

  • <div class="card"> por <main class="card">
  • <div class="attribution"> por <footer class="attribution">

  Marked as helpful

  1

  ---

  

  Shubham Jagtap•60

  @shubham-cjPosted 10 months ago

  @Blackpachamame

  Hey! Marcos

  Thank you for your feedback it was really helpful. I have made the code changes that you told me 👍

  Can you please help me again, in feedback you said that 👉 You can apply display: block to the image to remove the white space generated underneath

  But I can't get it, can you explain this again where should I use display: block property and where does white space appear?

  1

  

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  @shubham-cj Oh! An apology haha is that that space cannot really be seen with the naked eye in this case. I think this video will make it clearer to you: Get rid of that small space under your images

  Although in this case it is practically not noticeable, it is not necessary for you to apply it. But keep it in mind because you will probably need it at some point.

  Marked as helpful

  1

  

  Shubham Jagtap•60

  @shubham-cjPosted 10 months ago

  @Blackpachamame

  Oh! This is insightful I had no idea about it, but Now I understand your point. I'll use this in the upcoming projects. Thank you!!🤗

  0
• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 10 months ago

  Hello @shubham-cj!

  Your solution looks great!

  I have a suggestion for improvement:

  • In order to make your HTML code more semantic, and since that is the main title of the screen, you can replace the <a> with <h1>. Unlike what most people think, it's not just about the size and weight of the text.

  The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.

  This tag change may have little or no visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  0