html css

Community feedback

• 

  P

  Øystein Håberg•13,260

  @Islandstone89

  Posted 11 months ago

  HTML:

  • Remove .underMain, it is not needed.

  • I would wrap all of the card content in a <div class="card">. Hence, your HTML structure would look like this:

  <main>
    <div class ="card">
       --card content 
    </div>
  </main>
  

  • "Learning" and "Greg Hooper" should be <p>.

  CSS:

  • I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

  • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

  • Remove all widths and heights in px, except for the profile image.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Remove all positioning and transform properties.

  • Remove z-index, it is not needed.

  • I'm not sure this needs a media query , as the layout doesn't change. When you do need media queries , they must be in rem or em.

  11

  Marked as helpful
• 

  larryQuao•130

  @larryQuao

  Posted 11 months ago

  These are my suggestions for your solution:

  • I think you forgot to add the : hover property to your card, try to do so to have the hover effect on the card. And not to forget, make sure you make the cursor: pointer to make the mouse pointer when hovered on the card to change to a pointer.
  • It would be nice if you would have a look at the Figma file, you would have gotten the right properties, sizes, widths and heights for your solution.

  I think these will help. regards

  01