Skip to content
OverviewSolutions
11
Comments
25
Haziq
@zyq-m

All comments

  • Haziq•320
    @zyq-m

    MCM HACKER SIAKKK

  • Haziq•320
    @zyq-m

    Hillary Clinton must crying af watching this work.

  • Haziq•320
    @zyq-m

    Boek do sifuuu

  • Haziq•320
    @zyq-m

    Boek dooo sifuuuuuu. Kipidap dong kebabbbbb

  • Haziq•320
    @zyq-m

    Hi Raymart Pamplona, thanks for reviewing my codes. I appreciate it. Thanks also for the suggestion. I've learned a lot new things from you. Thank you again!!

  • Haziq•320
    @zyq-m

    Hi Faiyaz.

    Congrats on completing the challenge. Here my few a opinions.

    • learn css grid and flexbox because it is useful for responsive design
    • having a strong basic of css. This will help you in making better decisions.
    • try to write css by your own instead using libraries. This is a great practice in understanding the css

    Feel free to take a look at my solution. I've completed this challenge.

    Happy coding.

  • Haziq•320
    @zyq-m

    Hi Junaid.

    Congrats for completing this challenge. I notice that a few mistake in your code.

    • body does not need color
    • set body 's height eg: body { height: 100vh; }
    • center the main by doing this simple line of code body { display: grid; place-items: center; height: 100vh; }
    • background image should not be in main instead it should be in the body
    • you should set the max-width of main so that your content does not stretch after 1440px view

    For better understanding you can refer to my code. I've done this challenge.

    Happy coding!!

  • Haziq•320
    @zyq-m

    Hi Ryoma.

    Well done. You completed the challenge. It was close to design. I notice that your container does not centered well. Here my tips for fix this:

    • remove width of the body instead put the height height: 100vh;
    • center container using grid body { display: grid; place-items: center; }

    I think that's it. Feel free to take a look at my code. I've done this challenge.

    Almost forgot. Here my tips on responsive design:

    • go for mobile first then desktop
    • use media queries
    • be familiar with flexbox and css grid

    Feel free to watch this https://www.youtube.com/watch?v=0ohtVzCSHqs&t=270s

    Happy coding!!

    Marked as helpful
  • Haziq•320
    @zyq-m

    Hi Dhiya.

    Well done buddy the design was close. Here you can set the width of box thus it looks so close to design.

    max-width: 69.3125rem;

    Also your right-box image does not blended properly. Feel free take a look at my code to find your answer.

    Happy coding.

    Marked as helpful
  • Haziq•320
    @zyq-m

    Hi Quentin.

    Well done buddy. That was close to design. I notice that your order_summary is not centered well. You forgot to set the height of the body. You can fix this by:

    • set the height of body body { height: 100vh; }
    • remove margin-top of order_summary

    That's it. Happy coding!!

  • Haziq•320
    @zyq-m

    Wow it was close to the design. Great job buddy!! I notice that your main is not centered. You can fix this by using grid. Write this simple line in your body tag.

    body { display: grid; place-items: center; }

    Happy coding!!

    Marked as helpful
  • Haziq•320
    @zyq-m

    Wow nice bootstrap site!! I think you need to adjust proper max-width of the card. Also the image should be responsive. Here how you can set a responsive image:

    img { max-width: 100%; height: auto; }

    For better understanding, you can take a look at my code.

    Marked as helpful
  • Haziq•320
    @zyq-m

    Great job Jairo!! The card is not centered. You can fix by using flexbox or grid. Feel free to look at my code for better understanding.

    Happy coding

  • Haziq•320
    @zyq-m

    Can someone help me with Html Issue?

  • Haziq•320
    @zyq-m

    Wow that was close enough to design. I have a couple of suggestion here.

    If you want your site is close to design, you can change the background-color: hsl(225, 100%, 98%) to background-color: hsl(0, 0%, 100%).

    Then, you should set your max-width of order-summary to max-width: 28.125rem probably.

    Happy coding evilhare!!

    Marked as helpful
  • Haziq•320
    @zyq-m

    Great job buddy!! The design was close enough. For me, you need to set correct max-width and height. You can refer to my solution.

    Have a great day. Happy coding.

    https://www.frontendmentor.io/solutions/responsive-page-using-sass-flexbox-NQ56cmvX9V

  • Haziq•320
    @zyq-m

    Sass is amazing technology to use. Once you use it you will never go back to pure css. Hahaha. In my opinion, you need to center your card properly. Feel free to take look at my solution.

    Happy coding Carlos!!

    https://www.frontendmentor.io/solutions/static-site-using-sass-and-bem-48zKADcKc

  • Haziq•320
    @zyq-m

    Wow the design was close enough. Just need to adjust the max-width and height of card, add some overlay on the image. If you don't mind, take a look at my solution.

    Happy coding Stephane!!

    https://www.frontendmentor.io/solutions/responsive-page-using-sass-flexbox-NQ56cmvX9V

    Marked as helpful