Responsive news homepage using Grid and TailwindCSS

Community feedback

• 

  Adriano•38,250

  @AdrianoEscarabotePosted about 2 years ago

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

  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="px-16 font-bold tracking-widest py-3 md:py-4 uppercase bg-soft-red transition-all hover:bg-very-dark-blue text-white">Read more</a>

  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;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Dario Rodrigues•160

  @UnidadePosted about 2 years ago

  @AdrianoEscarabote Hi Adriano, thanks for the feedback. I agree about the button tag, I forgot to use a <a> tag, every time I'm styling something clickable by the user, I automatically use the button tag without thinking about it 😅. Thanks for the solution of the stretching at the big resolutions, really helpful.

  1
• 

  Maxime•430

  @maxime927Posted about 2 years ago

  Oì Dario, tudo bom contigo ? ;) I think i can give you some advices to help you to improve your solution :

  • As you can see, we can divide the design in 3 big columns ( by the three columns of the last section). So, you can divide the structure as two sections :

  <section class="first-section">
      <div class="main-content">…</div>
      <div class="aside">…</div>
  </section>
  <section class="second-section">
      <ul>
          …
      </ul>
  </section>
  

  In that way, you'll be able to define a specific width to each box in function of the container they all in.

  For exemple : For the three cards at the bottom you'll be able to do this .second-section ul li { width: calc((100% - 60px)/ 3); } "60px" represent 2 times 30px which are the spacing between each column. and by getting the <ul> parent as a flexbox with justify-content: space-between you'll have the good size for your Three cards section ;)

  For the main content .main-content { width: calc((100% - 60px)/ 3 * 2 + 30px); } because the main content takes 2 column i added "* 2" and "+ 30px" to include the column spacing unused because there are only 2 column in this section.

  Parabéns para a tua solução, continua como assim :) Hope it helps...

  Maxime

  Marked as helpful

  1