Responsive mobile first landing page using Flexbox

Community feedback

• 

  Gareth•410

  @Gareth-MoorePosted over 2 years ago

  Hey Monica!

  Great stuff! I'm also new here so take my advice with a pinch of salt :)

  I thought your semantic HTML was really good. I just didn't know what was happening with your CSS. Perhaps you might want to try grouping your CSS into categories. Something like this:

  /* ==========
    DEFAULTS
  ========== */
  
  * {
    box-sizing: border-box;
  }
  
  /* ==========
    TYPOGRAPHY
  ========== */
  
  p {
    font-size: 1rem;
  }
  
  /* ==========
    LAYOUT
  ========== */
  
  body {
    height: 10px;
  }
  
  /* ==========
    COMPONENTS
  ========== */
  
  button {
    width: 100%;
  }
  
  /* ==========
    @MEDIA QUERIES
  ========== */
  
  @media screen and (min-width: 376px) {
    body {
      color: red;
    }
  }
  

  A handy trick someone recently taught me was to make my html { font-size: 62.5%; } and body { font-size: 1.6rem; } which essentially changes 1rem into 10px which you can use throughout your site. For example if you want 52 px you can just use 5.2rem. rem is responsive so your site should look better in different screen sizes and you can still code in px just with a different name... :)

  I noticed your footer has to be scrolled down to because you made the container take up 100vh and then the footer had to be added under that. Perhaps make it 95vh and the footer 5vh or use a flex-box to make it responsive using space-between.

  You background colour (the purple) was too strong over the image. You can lighten it up by adding opacity: 0.5;. 0.5 meaning 50%. So up and down that to your liking.

  That's about all the feedback I can muster. Have a wonderful time coding! Gareth

  Marked as helpful

  1

  ---

  

  Mônica Aparecida Kerber Dalosto•100

  @MonicaDalostoPosted over 2 years ago

  @Gareth-Moore Hey Gareth, Thank you for the tips. I've adapted my project with some of them and others I will try to use in the next projects. Have a good time coding :)

  0