Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Loopstudios Landing Page with Scss

Gesiere• 780

@Gesiere

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Your feedbacks are important

Community feedback

Raymart Pamplona• 16,140

@pikapikamart

Posted

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

@Gesiere

Posted

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

0
Gesiere• 780

@Gesiere

Posted

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

0
Raymart Pamplona• 16,140

@pikapikamart

Posted

@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

@Gesiere

Posted

@pikamart Thanks so much, I really appreciate.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord