Skip to content
OverviewSolutions
17
Comments
11

Rabin Gharti Magar

@Rabin92UK455 points

Hi, I'm Rabin—a passionate web developer with a love for coding.

Latest solutions

View more solutions

Latest comments

  • Rabin Gharti Magar•455
    @Rabin92

    Hey @victoriacesar,

    Great job on this challenge!

    It's responsive and looks great on all screen sizes. To center the div you can add the height: 100vh; to .container in your media queries.

    Hope this helps & happy coding!

  • Rabin Gharti Magar•455
    @Rabin92

    Hey, Lyndsey! 👋

    Congratulations on completing your first challenge! 🎉 Your solution is looking good.

    On small devices (portrait mode), there is horizontal scrolling caused due to the fixed width given to the img tag and the padding of 50px to the main tag. To fix this issue you can remove the fixed width property and add max-width: 100%; to #hero-image img and then simply replace the main tag padding value to 1em.

    Here are few other suggestions:

    1. For a better user experience you can add cursor: pointer to the button tag.
    2. In your HTML code you have used id attribute as a selector. I would suggest you use a class selector instead because id's are unique whereas classes are reusable. Check out this resource on the difference: https://css-tricks.com/the-difference-between-id-and-class/
    3. Currently it is still displaying a mobile wallpaper on larger devices. To display a desktop wallpaper, you can replace background-image to desktop on media queries.
    4. I would suggest you use relative units instead of fixed. However, it depends on the different circumstances therefore to be clear you can watch this helpful tutorial on when to use different CSS Units by Kevin Powell - https://www.youtube.com/watch?v=N5wpD9Ov_To
    5. Regarding your code, it's looking good. Just keep coding, practicing and you will start seeing a difference.

    Hope this helps and Happy Coding! 😊

  • Rabin Gharti Magar•455
    @Rabin92

    Hey, Hoophelie! 👋

    You have done a great job on this challenge! 🙌

    The site is fully responsive and looks great on all screen devices. Nicely formatted code with semantic tags in use.

    There's just a minor issue with an overlay as it does not fully expand to viewport size on a small screen landscape mode. To fix this issue, you can follow these steps:

    Add this code to the body tag:

    body {
position: relative;
}

    Remove width & height property from .overlay class and add the following code instead:

    .overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
}

    And lastly remove height property from a small screen devices with the class name of .landscape-page and add it to the media queries for a medium-large screens.

    To fix the accessibility issues, you can simply add a label tag. Learn more about these tag here: https://www.w3schools.com/tags/tag_label.asp

    Hope this helps and Happy Coding! 😊

  • Rabin Gharti Magar•455
    @Rabin92

    Hey @Sophia,

    Congratulations on completing your first challenge!

    I took a look at your site and currently, it's looking great on all screen devices. It's not breaking in any form. However, if you would like to learn about responsive design, you can check out the following resources on CSS Grid, FLexbox & Media queries.

    1. https://css-tricks.com/snippets/css/complete-guide-grid/ - CSS Grid
    2. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Flexbox
    3. https://www.w3schools.com/css/css_rwd_mediaqueries.asp - Media Queries

    Hope this helps!

  • Rabin Gharti Magar•455
    @Rabin92

    Hello @munloop,

    Congratulations on completing your first challenge!

    You have done a great job here. The design almost matches the mockup and looks great on most of the devices. My only suggestion is on a small screen landscape mode, the attribution border touches the card, to fix this problem you could simply add margin-top: 20px to the attribution class.

    Your Sass is looking good too, you have grasped a good understanding of features like variables and ampersand. To learn more about other features you can visit this awesome website: Sass

    Happy Coding!

  • Rabin Gharti Magar•455
    @Rabin92

    Hey @Rwinter88,

    Congratulations on completing your first challenge!

    Your site looks good, it's responsive and your email validation works fine.

    To fix the accessibility issues, you can add a label tag. You can learn more about this here: https://www.w3schools.com/tags/tag_label.asp

    Happy Coding!

View more comments