Skip to content
OverviewSolutions
17
Comments
11
Rabin Gharti Magar
@Rabin92

All comments

  • Victoria•80
    @victoriacesarSubmitted over 3 years ago

    The mobile version looks great but with the desktop one i don't know why I couldn't center the container div, well, it upset me a lot, so if anyone knows why it would be great! Some feedback maybe? Thank you!

    Single price using CSS grid

    3
    Rabin Gharti Magar•455
    @Rabin92Posted over 3 years ago

    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!

    1
  • Rabin Gharti Magar•455
    @Rabin92Posted over 3 years ago

    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! 😊

    0
  • Hoophelie•110
    @HOOPhelieSubmitted over 3 years ago

    Hey, everybody! 👋

    My solution is definitely not pixel perfect, but I tried to make it look pretty on both mobile and desktop! (I'll make the pixel perfect version very soon) It seems to work ok, I'm just not sure of the cleanliness of my code... Any feedback would be much appreciated!

    Thank you and happy coding🤗

    Responsive Coming Soon page using HTML, CSS and JS

    2
    Rabin Gharti Magar•455
    @Rabin92Posted over 3 years ago

    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! 😊

    3
  • Sophia•50
    @Sophia0501Submitted almost 4 years ago

    Hello, everyone! I've accomplished this challenge only for desktop resolution, I'm still confused how I can make it for mobile phone size. Should I use media query?

    Any advice or recommendation will be highly appreciated!

    HTML, CSS

    1
    Rabin Gharti Magar•455
    @Rabin92Posted almost 4 years ago

    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!

    1
  • Rabin Gharti Magar•455
    @Rabin92Posted almost 4 years ago

    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!

    0
  • Rabin Gharti Magar•455
    @Rabin92Posted almost 4 years ago

    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!

    0
  • Rabin Gharti Magar•455
    @Rabin92Posted almost 4 years ago

    Hey @webkingcoder,

    To get the desired hover border width, replace the following code:

    .help:hover {
  border-bottom: 2px solid white;
  padding-bottom: 10px;
}

    To this:

    nav li:hover::after {
  content: '';
  display: block;
  margin: 0 auto;
  width: 30%;
  padding-top: 0.4rem;
  border-bottom: 2px solid #fff;
}

    Hope this helps!

    0
  • Rohit Dhatrak•20
    @RohitDhatrakSubmitted almost 4 years ago

    Any good practices while writing html or css that I'm not following? Any feedback would be appreciated.

    Profile Card Component

    2
    Rabin Gharti Magar•455
    @Rabin92Posted almost 4 years ago

    Hey @RohitDhatrak,

    Congratulations on completing your first challenge!

    Currently, your site looks good but there are couple of things that needs to be added/altered:

    1- Use a semantic elements instead of <div> when possible because using semantic elements enhances accessibility, searchability.

    2 - <img> element is missing an alt attribute. Always add a required alt attribute and specify an alternate text for an image for better accessibility

    Besides that your code looks good and it's easy to read.

    Keep contributing your work in this community!

    Happy Coding! 😀

    1
  • Rabin Gharti Magar•455
    @Rabin92Posted almost 4 years ago

    Hey @Ejidike Esther,

    Congratulations on completing this challenge!

    You have done a great job here, your site looks great on all screen devices. However, there seems to be a few minor issues with regards to HTML and Accessibility which can be fixed easily. You just need to add alt attribute and give a short description in all of your <img> tag.

    Besides that your site looks amazing, keep contributing your work to this community.

    Happy Coding! 😀

    0
  • Rabin Gharti Magar•455
    @Rabin92Posted almost 4 years ago

    Hey @Deborah Trota,

    Congratulations on completing this challenge!

    Your site is responsive and it looks great on all screen sizes. You have done a great job on JS part too. The email validation is functioning properly.

    Keep up the good work! 😃

    Happy Coding!

    0
  • Rabin Gharti Magar•455
    @Rabin92Posted almost 4 years ago

    Hey Vanessa,

    Congratulations on completing this challenge!

    Your site looks great on all screen devices and you have done a good job using BEM to organise your code.

    Keep up the good work!

    Happy coding!

    1