html css

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 4 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.

  Marked as helpful

  1

  ---

  

  ameera•80

  @ameera-abedPosted 4 months ago

  @Islandstone89 Thank you so much for your valuable feedback. I really appreciate the time and effort you took to provide me with helpful insights. I want to ask how to make the container under the card I don't know if its shadow or container under the card please if you can help me in that also I cant determine the exact height and width for card if there any way I will fix all these thing soon thank you

  1
• 

  larryQuao•120

  @larryQuaoPosted 4 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

  0

  ---

  

  ameera•80

  @ameera-abedPosted 4 months ago

  @larryQuao thanks for advise I try open the figma file but figma not supported also try to import the file from figma but the same problem so I just guess the width and height if you have good way to set the exact measurement please write the way in comment thanks

  0