CSS Flex kullanarak QR menu

Community feedback

• 

  P

  Øystein Håberg•11,010

  @Islandstone89Posted 1 day ago

  Hey, well done!

  Here are some tips:

  HTML:

  • <main> holds all of the main content on a page. As a card would likely not be the only component on a page, I would wrap the card content in a <div class="card"> inside of <main>.

  • Remove <article>, it is not needed.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • Use the style guide to find the correct font-family and background-color.Remember to specify a fallback font: font-family: 'Outfit',sans-serif;

  • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

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

  • max-width on the card should be in rem. Around 20rem will work fine.

  • 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.

  • On the image, add display: block and height: auto.

  Marked as helpful

  0

  ---

  

  mkalkandev•70

  @mkalkandevPosted about 23 hours ago

  @Islandstone89 Thanks man, this is very useful information for me. I have a few questions to learn.

  "On the image, add display: block and height: auto."

  I don't really understand why we do this.

  1

  

  P

  Øystein Håberg•11,010

  @Islandstone89Posted about 10 hours ago

  @mkalkandev Glad to help.

  height: auto is used to maintain the image's aspect ratio. display:block is used to avoid unwanted space underneath an image - say you have an image wrapped in a <div> - you most likely want the image to take the full height of its container. Josh Comeau neatly explains why you should change the display value of images in this talk, from 1:00 to around the 9th minute. I highly recommend the whole talk, actually. And I would check out his website, which has tons of excellent articles.

  0
• 

  VIS-WAS•20

  @VIS-WASPosted 5 days ago

  It was containing semantic HTML elements. It was accessible and matching with expected outcome. Layout was looks good in all range of screen size. Code was well-structured,readable.

  0