Responsive landing page using CSS flexbox

Community feedback

• 

  Tjaša Žilavec•590

  @TjasaZilPosted over 2 years ago

  Hi Gamajunior!

  Good job on your design! I have a few suggestions for you to consider, that will make your solution closer to the design.

  Here are some of the CSS changes that you can implement:

  • You can change height: 400px; in the body tag to height: 100%. After that, you can add:

  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  

  this will center your card on all devices.

  • You can style your button with border: none; to get rid of the border around it and make it look closer to the solution.

  Some HTML changes:

  • The <div class="Card" > around your image is not necessary for this project, so you can delete it.
  • Instead of using <br> in your <p> tag it is better practice to style the text with CSS. Try adding width:270px; to .Content and deleting <br> from HTML. It will give you the same result.
  • Look into semantic HTML. Using tags like <main>, <header>, <footer>... makes the site more accessible and most of the time also easier to style. Try to use <div> only when necessary.

  Hope it makes sense, you can have a look at my solution for this challenge to have an idea.

  Marked as helpful

  1

  ---

  

  Gamajunior•30

  @Gamajunior6Posted over 2 years ago

  @zuzexx Thank you for taking your time going through my code, now i have learn more on how to code neatly and also made corrections to the code. I will also read on the html semantic I had followed you on Frontend mentor, will appreciate it if you do the same.

  0

  

  Tjaša Žilavec•590

  @TjasaZilPosted over 2 years ago

  @Gamajunior6 Hey, you are welcome. I am glad that my answer helped you!

  0
• Account deleted

  Hey Gamajunior, congratulations on completing the challenge! You did a great job 😉

  Let me give you some little tips for optimizing your code:

  • remove width: 100%; height: 400px; properties from body because not necessary
  • add main tag and wrap the card for improve the Accessibility
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
  • remove margin from Wrapper class because with flex they are superfluous
  • after, add min-height: 100vh and margin: 0 to body because Flexbox aligns child items to the size of the parent container
  • instead of using px use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😁 by Travolgi

  Marked as helpful

  1

  ---

  

  Gamajunior•30

  @Gamajunior6Posted over 2 years ago

  @travolgi Thank you for taking your time going through my project, I really appreciate it. I had follow you, I will appreciate if you the same.

  1

  Account deleted

  @Gamajunior6 You are welcome! it's nice to help, keep it up 😉

  0