Responsive Four Card Feature Section

Community feedback

• 

  Adriano•42,890

  @AdrianoEscarabote

  Posted 8 months ago

  Hey WajahatAli130, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:

  Avoid using the <br> tag in your HTML code. While <br> might seem like a simple way to break lines, it is considered bad practice and can lead to significant accessibility concerns. For users who rely on screen readers, the presence of <br> can be announced, which disrupts the flow of the content and creates a confusing experience.

  Instead of <br>, you should use semantic HTML to structure your content properly. For example, wrapping text in paragraphs (<p>) or using <div> containers for sections provides a cleaner and more accessible solution. This approach improves usability for screen readers and ensures that your content is presented in a meaningful way to all users.

  For more detailed guidance, refer to the MDN documentation on the <br> tag: MDN: Accessibility Concerns of <br>

  Pro Tip: Accessible web development isn't just a recommendation—it's essential for ensuring inclusivity on the web!

  Everything else looks great.

  Hope this helps! 👍

  00

  Marked as helpful
• 

  calvinvin•1,170

  @calvinvin

  Posted 8 months ago

  1. "id" property is unique and you should not have two elements with same id value (i.e. your #image). Setting "image" as class name instead of id value would be appropriate by the way you used #image.

  2. "Position: absolute" (the way you control the position of your .card-text and #image) is usually avoided unless necessary, because the element of absolute position will pop out the whole layout (the "justify-items/contents" or "align-items/contents" properties on .supervisor can no longer have effect on .card-text and #image), and may ruin your other elements easily. Also you have to set relative position on one of the ancient element, set a size on the container, ...etc, which will take a lot more work and instead make elements harder to control.

  3. Many unnecessary properties were set:

  • the <div> outside the <img>. You can just use <img> without <div>.
  • the "width: 100%" of .cards. Removing it will make no difference.
  • the "height: 250px" on div will hard-code all <div> elements' height to 250px unless the subsequent css styling override it. And we usually don't want this behavior.
  • the "height: 100%" of .cards. But removing it will destroy the layout. That is because you hard-coded "height: 250px" on .cards. And you have to hard-code "height: 250px" because you set absolute position on .card-text and #image, therefore the browser cannot arrange height based on the elements automatically.
  • the "display: block" on .title. The child elements (two <p>) are all block elements, and the .title would be block element then.

  I strongly recommend the Kevin Powell's youtube channel. I believe you can learn a lot from it, as I just did recently, and save you a lot of ineffective hard work.

  Appendix after reading your "Solution retrospective":

  1. For you struggling positioning elements. Make good use of grid and flex for layout instead of using absolute position.
  2. To bring the central 2 cards closer, you have to get rid of the central blank grid cell. You set the grid as 3 columns, tell the browser that the left and right card have row span of 2, and the browser will fill the four cards in the grids just like the design example.

  00

  Marked as helpful
• 

  Bassel || باسل•520

  @Basselfathy

  Posted 8 months ago

  Hi Wajahat.

  for the Desktop version, you can fix it like this..

  .cards{
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: auto auto;
          align-items: center;
      }
      .supervisor {
          grid-area: 1 / 1 / span 2 / span 1; 
      }
      
      .team-builder {
          grid-area: 1 / 2 / span 1 / span 1; 
      }
      
      .karma {
          grid-area: 2 / 2 / span 1 / span 1; 
      }
      
      .calculator {
          grid-area: 1 / 3 / span 2 / span 1;
      }
  

  but you will encounter farther issues because of the styles you give to the cards like margins and absolute positions, the browser inspector tool will help you find what causing the issues.

  00

  Marked as helpful