Responsive card app made with grid & mobile first

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted about 1 year ago

  Hello, @gene2971!

  You can use the following CSS to first of all center the card in the middle of the page by using flex on the body:

  body{
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  

  • We use min-height:100vh on the body because flexbox needs height to work upon and this will make sure the content is always in the center and doesn't cut off even if in landscape mode on devices.

  Your CSS code is well written but here are a few tips to avoid repetition of code:

  • Instead of using font-family: var(--ff-text); and font-weight: var(--fw-400); on several elements, you can add them just once on the body.

  I also took a look at the HTML file and you were on the right track with the commented anchor(a) tags and a h1!

  • These are actually not buttons but anchor tags! So uncomment the anchor tag lines in your HTML and change the element selector in your CSS from button to a and add one more CSS property display: inline-block or display:block to the existing CSS styles. (we add inline-block or block to anchor tags because by default they are inline elements and paddings or margins wouldn't affect them if they are inline).
  • You can also uncomment the h1 and add the following CSS to it so that the HTML is more semantic and accessible :

  ``
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  

  • This will make the h1 hidden from the users but making it pretty accessible to SEOs and screen readers.
  • And lastly, instead of using div for the .container you can use the <main> tag instead to add more meaning to the HTML (main tag basically lets the search engines know what the main content of the page is)

  It was good to see that you were on the right track with the semantic HTML even though it was commented out ahah! also good job on the challenge! 🙌🏻

  `Keep up the hard work and happy coding!🕺🏻**

  Marked as helpful

  0

  ---

  

  gene2971•110

  @gene2971Posted about 1 year ago

  @adityaphasu

  hello boots, firstly thank you for the feedback and secondly for the certain tips you gave To be honest, I was hesitating whether to use a-tag or a button and opted for the latter . Personally, I'm glad I'm finally out of that horrible "tutorial hell". LOL

  have a nice weekend and happy coding

  1

  

  Boots 😺•1,590

  @adityaphasuPosted about 1 year ago

  @gene2971 HAHAHAHA! Thing is I noticed the commented tags and I was like why'd they go with button they were spot on using a tags lmao

  0