Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
24
Comments
3

Ramesh Kumar Munjal

@rameshkmunjalINDIA GURGAON580 points

a hobbyist web developer. skill areas - HTML , CSS, Javascript , React , NodeJs.

I’m currently learning...

ReactJs

Latest solutions

  • Maker-Pre-Launch-Landing-Page (ReactJS)

    #react

    Ramesh Kumar Munjal•580
    Submitted over 2 years ago

    0 comments
  • Galleria Slideshow ( ReactJS)

    #react

    Ramesh Kumar Munjal•580
    Submitted over 2 years ago

    0 comments
  • Entertainment App ( ReactJS & Redux)


    Ramesh Kumar Munjal•580
    Submitted over 2 years ago

    0 comments
  • Connect Four Game ( VanillaJs )


    Ramesh Kumar Munjal•580
    Submitted over 2 years ago

    0 comments
  • calculator app (vanillajs)


    Ramesh Kumar Munjal•580
    Submitted over 2 years ago

    1 comment
  • To Do List Vanilla Js


    Ramesh Kumar Munjal•580
    Submitted over 2 years ago

    0 comments
View more solutions

Latest comments

  • impure•40
    @z0dded
    Submitted almost 3 years ago

    Product preview card component using pure css

    2
    Ramesh Kumar Munjal•580
    @rameshkmunjal
    Posted almost 3 years ago

    Hey @z0dded Congratulations on completing the challenge. You have done a good job. Regarding the problem you discussed , I would like to say - when I make changes in your css and use display:flex, found no problem. I suggest you to try once again . I made following changes and the page is ok after making these changes. #card{ display:flex; border-radius: 0.5rem; background-color: var(--white); width:40rem; height:30rem; } #image-container{ width:50%; border-top-left-radius:0.5rem; border-bottom-left-radius:0.5rem; height:100%; background-image:url(./images/image-product-desktop.jpg); background-size:cover; } #content{ height:100%; width:50%; padding:2rem; font-family:”Monserrat”, sans-serif; } Please revert if you still face this problem. Thanks for reading.

  • Alao abdulmusawwir•130
    @Jbsmall17
    Submitted almost 3 years ago

    A responsive website with dropdown navigation

    1
    Ramesh Kumar Munjal•580
    @rameshkmunjal
    Posted almost 3 years ago

    Hello @Jbsmall17 Congratulations on completing this challenge. I suggest to remove following shortcomings in the page to look it better.

    1. As per design nav should not show in mobile version but it is showing .
    2. While setting media query you have given min-width 375px and max-width 1000px . which makes no sense . It covers all types of devices like mobile , tab and desktop. For mobiles , set media query 375-500 and for desktop from 992-1440px.
    3. In mobile version , Container is not centrally aligned . You can do this by styling body tag like this : body{ min-height:100vh; display:flex; justify-content:center; align-items:center; }
    4. In mobile version, Main element is not properly styled . Hence image is overflowing its height .
    5. P element of main section is not styled . set its width and line-height properties to look like design.
    6. Apart from the above , there are accessability & html issues as per report. Like img element should always have alt attribute and button should not contain anchor tag etc . You can remove them to get zero error report.

    I hope my feedback will help to make your code better. Thanks for reading.

  • newbie•200
    @gidhub48
    Submitted almost 3 years ago

    Blogr-landing-page

    #sass/scss
    1
    Ramesh Kumar Munjal•580
    @rameshkmunjal
    Posted almost 3 years ago

    Hello @Tuchpon Congratulations on meeting Blogr-Landing_page challenge.

    I observe following shortcomings in your design . You can improve the page after removing them.

    1. In Desktop design, nav is not as per design. You have given hamburger menu in place of left and right ul.
    2. As per design in challenge , In main part of the page ( complete page minus header and footer), in each section one side is text and other is image . in first and third section you have stacked them one over another.
    3. In mobile design, margin-bottom of section-2 can be reduced. Such large space is not looking well.
    4. Apart from above , you may find some errors in accessability report which can also be removed by slight change in your code. All page content should be contained in one landmark. So your page should be contained like this inside body tag. div.wrapper – nav – main-footer-wrapper-closed. You should use semantic html as max as you can.
      I hope it helps your to improve your skills .

    Thanks for reading .

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub