homepage news with react and tailwindcss

Community feedback

• Account deletedPosted over 2 years ago

  Hi, when using 'flex-direction: column' ensure that the elements are aligned to the left. Also give images a 'width: 100%' instead of pixels to make it responsive, 'max-width' is only for especial cases. Cheers to complete the challenge

  11

  Marked as helpful
• 

  Maxime•430

  @maxime927

  Posted over 2 years ago

  Hi Sieben, how are you ? I have some tips that i hope would helps you :

  • It seams dificult to use grid with this template as I saw on multiple solutions before, why don't you stay with flexbox ? You'll be able to fix each width and space without being too much constrained with the grid structure.

  • For Designers the result is really important, pay attention to spacings and font-size as well, i can advise you to use the chrome extension : PerfectPixel

  For exemple, for the News block :

  • you can use an <ul> tag to list the elements and almost no responsive style for this block as this below : HTML

  <ul>
      <li>
          <a href="#" title="Hydrogen VS Electric Cars"></a>
          <h3>Hydrogen VS Electric Cars</h3>
          <p>Will hydrogen-fueled xars ever catch up to EVs?</p>
      </li>
      ...
  </ul>
  

  and styles

          ul {
            padding: 0; margin: 0; list-style: none;
  
            li {
              position: relative; padding: 27px 0 12px; border-top: 1px solid $dark-grey; margin-top: 18px;
  
              &:first-child { margin-top: 0; border-top: none; }
  
              a {
                position: absolute; z-index: 2; left: 0; top: 20px; right: 0; bottom: 0;
  
                &:hover + h3 { color: $orange; }
              }
              h3 { color: $white; font-weight: 800; font-size: 20px; margin-bottom: 8px; }
              p {color:$grey; margin: 0 0; font-size: 15px; line-height: 26px;}
            }
          }
  

  Hope it helps...

  12

  Marked as helpful