Skip to content
OverviewSolutions
9
Comments
6
Nishkarsh Dubb
@Nishkarsh01

All comments

  • pierre-pellegrino•970
    @pierre-pellegrinoSubmitted over 3 years ago

    I'm facing an issue : Responsive is not working below 780px of page width and I can't figure out why.

    Huddle Landing Page

    1
    Nishkarsh Dubb•165
    @Nishkarsh01Posted over 3 years ago

    I saw your front-end challenge and the issue you were facing, and I created a pull request to help you understand.

    I updated the Html and CSS Code a bit in order to make the webpage responsive below 720px;

    1. I created a div with class .center to wrap & center the entire content.
    2. Apart from that I made use of relative units of measurement using % and rem.
    3. When the viewport width hit 720px I changed the flex-direction of the flex-container (.container) to column and accordingly adjusted the width of the mockup image.
    1
  • Musha•100
    @mushamakSubmitted over 3 years ago

    How to move svg on top left or right without adding any margin or padding? I tried with text-align: start , but it didn't work, so I simply added margin-right to display it on top-left.

    3 Flexible and Responsive Card Page

    2
    Nishkarsh Dubb•165
    @Nishkarsh01Posted over 3 years ago

    Try creating a responsive web-design. I notice that you've used display:flex on the main tag. Try changing the flex-direction to column to make the cards stack on top of each other in combination with media queries.

    As per the svgs I think you've already found a solution to that.

    1
  • Nishkarsh Dubb•165
    @Nishkarsh01Posted over 3 years ago

    Could you please help me understand the place-value property that you used on body. Could not understand it over documentation. Would be great if you could take the time to help.

    Also, I loved the way you've written and organised your code. Really Beautiful.

    0
  • Nishkarsh Dubb•165
    @Nishkarsh01Posted over 3 years ago

    Hello, Ramy Ibrahim Fawzy! 👋

    Great Job on finishing another frontend mentor challenge! Here are few suggestions from me:

    • Update the background color of body to background: hsl(0, 0%, 95%);
    • Change the color of each h1 to #fff or white
    • Try rounding the corners of the boxes with CSS property border-radius by separately targeting the .box:nth-child(1) and .box:nth-child(3) .
    • Read about semantic. Semantic elements lead to more consistent code, they are easier to read and improve accessibility.
    • Try using comments more often in code, the comments eventually help you and others to clearly understand the logic behind the code be it in any language.

    Great effort! Keep Hustling, have fun coding! 💪

    0
  • Nishkarsh Dubb•165
    @Nishkarsh01Posted over 3 years ago

    Hello, Gilcllys de Souza Costa! 👋

    Congrats on finishing another frontend mentor challenge! Here are few suggestions from me:

    • Update the background color of body to background: hsl(0, 0%, 95%);
    • Change the case of all the h1 headings to uppercase, using:
     h1{
  text-transform: uppercase;
}
    • It is advised that you do not use inline styling for changing the size of SVG icons instead target them in the stylesheet, it is a bad practice as it makes code cluttery and harder to understand.
    • Try using utility classes to avoid repetition of code.
    • Try using comments more often in code, the comments stating the intent eventually help yourself and others clearly understand the logic behind using certain classes.

    Good luck with that, have fun coding! 💪

    0
  • Nishkarsh Dubb•165
    @Nishkarsh01Posted over 3 years ago

    Hello, Deepthi-Ramesh! 👋

    Congrats on finishing your first frontend mentor challenge! Here are few suggestions from me:

    • please do add the link to the GitHub repository so that we can view your code.
    • update the background color of body to background: hsl(0, 0%, 95%);
    • try giving the heading font-family: 'Big Shoulders Display', cursive;
    • try reducing the height of each card.
    • try fixing the ACCESSIBILITY ISSUES and HTML ISSUES mentioned in the report by frontend mentor.

    Good luck with that, have fun coding! 💪

    0