All comments

• 

  dinkley•30

  @dinkleySubmitted about 1 year ago

  Difficulties:

  • I had problems trying to get the image to fit into the div with equal white space on all sides. I had to manually adjust the padding-top to make it "fit" (i eyeballed it), because it always seemed to be less than the padding on all sides, even if set with the same values.
  • I also had trouble getting the card to appear in the middle of the page rather than be aligned with the top.

  Code:

  • I'm fairly confident with my HTML so far, but I'm a little bit unsure with CSS. I'm still wondering when I should re-use an existing CSS rule, or if I should make a new one specifically for a certain element.

  • First time submitting a solution / deploying a Vercel page, so apologies if I broke or missed anything :)

  

  QR Code Component with vanilla HTML/CSS

  1

  51
  

  Rhino•155

  @Rhiino1Posted about 1 year ago

  Great work!

  Answering your questions:

  • This is a good solution, sometimes vertical padding differs from horizontal, even so you eyeballed, looks good.
  • I saw that you use a display:flex on your body, although it needs more than that to center the content. To do that add to body: justify-content: center; align-items: center; height: 100vh;. Remember with 100vh you are saying to your body to use all the view port, that means it will center your content.
  • About css rules and elements: If you have a list, you should create a class to style your <li></li> elements. If you ever need again to create a list as above, then you can re use your class, otherwise create a new one for the new element. So, you can extract styling for different elements and create some shared classes that cover everything, like a success button or an error button, at the end they should have some similarities, but differs it another ways.

  Good job, keep it up! :)

  0
• 

  Adasat•100

  @AdasatSubmitted about 1 year ago

  With Next.js framework and TailwindCSS

  

  Homepage

  1

  60
  

  Rhino•155

  @Rhiino1Posted about 1 year ago

  Well done!

  If I could add something, could be that you should check out the modifier hover: that Tailwind provides, It could help you to change color to the navbar, the button and news titles.

  You did a great job! :)

  0
• 

  patrickingj•150

  @patrickingjSubmitted about 1 year ago

  I can't seem to make the "learn more" button stay in the same position in desktop mode, and i don't google understood my question. Pls help

  

  3 Column Preview Card Compon

  1

  50
  

  Rhino•155

  @Rhiino1Posted about 1 year ago

  Hi patrickingj!

  Good job doing this challenge :)

  A was reviewing your code about the question you made:

  You should check giving a display:flex; flex-direction:column; to your <div class="cars"></div>. This helps you giving width and height to all the child components. Also you can control how the items display on your div, with justify-content and align-items.

  This could help to maintain the buttons in the same position.

  Well done again :)

  0