News Homepage

Community feedback

• 

  Jay Khatri•4,230

  @khatri2002Posted 3 months ago

  Hi @amirhirx!

  The developed solution looks good!

  Suggestions for Improvement:

  ---

  1. Alignment in the News Section

  The precise alignment of the news cards is crucial for this section. Specifically:

  • The Top 10 Laptops of 202 card should align exactly below the read more button.
  • The The Growth of Gaming card should align exactly below the New card.

  However, these alignments are currently not being maintained.

  You’ve used multiple flex-boxes and inner flex-boxes, combined with margins and paddings to create space between cards. While this works, it introduces the following challenges:

  • Inconsistency: Maintaining consistent gaps and precise alignment becomes tedious and error-prone.
  • Manual Effort: Adjustments require manually tweaking margins and paddings for each card.

  Better Approach: Grid Layout

  Instead of relying on multiple flex-boxes, consider using a CSS Grid Layout for the entire section.

  • Why CSS Grid?

    • It provides more control over the alignment of elements.
    • You can directly control the spacing between rows and columns using row-gap and column-gap.
    • It eliminates the need for individual margins and paddings, reducing manual adjustments.

  • Why This Helps:
    With this approach, the news cards (or even parts of cards) can become direct children of the grid, ensuring perfect alignment.

  Using display: contents

  If you prefer wrapping related cards (e.g., bottom cards) inside a div, but still want the alignment benefits of a grid:

  • Use the display: contents property on the wrapper div.

  What It Does:

  • display: contents makes the wrapper element "invisible" to the grid layout, treating its children as direct grid items.

  Example:

  <div class="news-section">
      <div class="news-card">Card 1</div>
      <div class="news-card">Card 2</div>
      <div class="news-wrapper" style="display: contents;">
          <div class="news-card">Card 3</div>
          <div class="news-card">Card 4</div>
      </div>
  </div>
  

  2. Hover Effects

  Ensure hover effects are implemented as per the given design reference.

  • Examples: Read More Button, Cards

  ---

  Great efforts so far! Keep it up! 🚀

  Marked as helpful

  1

  ---

  

  AmirHossein•160

  @amirhirxPosted 3 months ago

  @khatri2002 Thank you for yor suggestion

  1