News-Homepage (Responsive, CSS-Grid, Flexbox, Tailwind CSS)

Community feedback

• 

  Adriano•38,040

  @AdrianoEscarabotePosted almost 2 years ago

  Hi David, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  If we see how the layout is behaving at higher resolutions, with the help of google dev tools, we will see that it is stretching a lot, to solve this we can use a max-width with the value we want the content to stop growing and to center use a margin: 0 auto;

  body {
      max-width: 1440px;
      margin: 0 auto;
  }
  

  I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Read more, he is not confirming a form, or something like, it will be redirected to another page, to read more about!

  To resolve do this:

  <a class="h-12 w-46 bg-softRed text-sm font-bold tracking-btn text-offWhite hover:bg-veryDarkBlue">READ MORE</a>

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  David•1,130

  @David-Henery4Posted almost 2 years ago

  @AdrianoEscarabote Hi Adriano, I'm good, I hope your well

  Thanks for the tip on the max-width on the body, I Completely forgot to check on bigger screen sizes and didn't realize it was stretching, so that was a great spot! I will make sure to watch out for this on future projects.

  I also changed the button to an anchor tag because I 100% agree this would be more of a link than a button based on the behaviours it would have. I chose a button initially because in the design it looked more like a button and my instinct was to use a button element.

  Thanks for the feedback though mate those were two great spots! I greatly appreciate it Thank You! 👍

  1
• Account deleted

  Hi; add the property 'object-fit: content' to the images to avoid it distorted when resize

  1