Rabin Gharti Magar

@Rabin92
UK
450Points

Hi! I am Rabin, a passionate web developer who loves coding!

Latest Solutions

Latest Comments

  • Rabin Gharti Magar has commented on Lyndsey Harvey's "Mobile first using HTML and CSS only" solution

    0

    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 has commented on Hoophelie's "Responsive Coming Soon page using HTML, CSS and JS" solution

    3

    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 has commented on Sophia's "HTML, CSS" solution

    1

    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 has commented on Bryan Munguia's "Profile Card using HTML and SASS" solution

    0

    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!