Loopstudios Landing Page with Scss

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. The layout both in desktop and mobile is good. It resizes well also when going in mobile state.

  A couple of suggestion/s;

  1. Body. In your body tag, you declared width: 100vw and that is the cause of the appearance of scrollbar at the bottom. Removing will be really good. Also remove the height: 100% in it as well, because if you inspect it at dev tools, your body tag does not really captures the whole layout because it is limited to 100% of its parent, referring to the viewport. Remove that so that it will capture the elements.

  2. Color. In your grid section, the color of the font that you are using is somewhat grey. So if you blend it in the background, the contrast is very low. Use a more white-ish of a color so that it will be easy to read and adding some overlay in those images, to make them a little bit dark, just a touch, just to make the text pop out more.

  Well that's all. Overall you did a really good job^^

  1

  ---

  

  Gesiere•780

  @GesierePosted over 3 years ago

  @pikamart thank you for the feedback, will look into what you said.

  0

  

  Gesiere•780

  @GesierePosted over 3 years ago

  @pikamart but how do you suggest that I set up my body and html elements anytime I start a project.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @Gesiere Hey, well my everyday temple is this

  html {
      box-sizing: border-box;
      font-size: 100%;
  }
  
  body {
      margin: 0 auto;
      min-height: 100vh;
      padding: 0;
  }
  
  *,
  *::before,
  *::after {
      box-sizing: inherit;
  }
  

  That is my base. But always keep in mind. Avoid using height: 100vh in your body okay. Do not use that, let the element give the body the dimension that it needs^^

  1

  

  Gesiere•780

  @GesierePosted over 3 years ago

  @pikamart Thanks so much, I really appreciate.

  0