Skip to content
OverviewSolutions
8
Comments
7
Fauzan Reza
@codebyfauzan

All comments

  • nowshadjaman21•80
    @nowshadjaman21Submitted about 2 months ago
    What challenges did you encounter, and how did you overcome them?

    fixing height seems challenging to me

    Social

    1
    Fauzan Reza•180
    @codebyfauzanPosted about 2 months ago

    Hi @nowshadjaman21, good job for this one. However I think you should check the style-guide.md so that you can build more precise with the design.

    Also it's a good trick for me to know that tailwind can use from cdn. thanks.

    Have a good day!

    Marked as helpful
    1
  • Fauzan Reza•180
    @codebyfauzanPosted about 2 months ago

    Hi @ShakilMaria, I think everything is fine. But I have a few suggestions.

    My Suggestions and Feedback

    1. Never set font-related properties such as letter-spacing, font-size, line-height in px and instead set them in rem or em. See why
    2. Need some adjustments in sizes so it will look the same with the design, you can see the design in Figma for more detail in sizes since this is a free+ challenge
    0
  • Fauzan Reza•180
    @codebyfauzanPosted 2 months ago

    your qr code project is not found, I can't review it

    0
  • Muhamad Nur Alfi Syahrin•100
    @TahoeBoelatSubmitted about 3 years ago

    Hi everyone. This is my solution for three column page challenge. Im still wondering if the rules for the mobile design is 375px, then what about the mobile with the width below 375px? Anyone have ideas for solving that? Thank's.

    Three column page made using Flexbox

    1
    Fauzan Reza•180
    @codebyfauzanPosted about 3 years ago

    Hello Alfi, Good job on this one!

    I think you should take a look at your media query and remove (min-width: 375px ) so it will behave one column on mobile whatever the device's width and will behave one row on desktop

    Marked as helpful
    0
  • Abraham Gutierrez•25
    @abgutierrez507Submitted almost 4 years ago

    Guys, i will definetely appreciate ur' feedbacks. This is my third try time performing code with HTML+CSS. It was impossible to center the two circle into the card. Thanks guys.

    LandingpagewithCSS+HTML

    4
    Fauzan Reza•180
    @codebyfauzanPosted almost 4 years ago

    Good effort Abraham. I think you should change height properties of .container from 150vh to 100vh and position: auto to position: relative. Then try to change bottom or left properties from bg-ballon-bottom. It should help

    0
  • Vincent Gammill•30
    @VincentGammillSubmitted almost 4 years ago

    Using Chrome developer tools and looking at the mobile view (Ctrl+Shift+I then Ctrl+Shift+M), my card ends up stuck to the left side of the screen. How can I fix that?

    Centering and layout

    2
    Fauzan Reza•180
    @codebyfauzanPosted almost 4 years ago

    Good work Vincent. I've check your solution, it seems like because of bottom circle overflowing so the profile card position is on the left of screen and unfortunately I don't know how to fix that, sorry. But I want to recommend you to using bg-pattern-top, bg-pattern-bottom and bg-pattern-card as backgrounds instead of images so they will not overflowing from their element. There are many background properties like background-image, background-size, background-attachment, background-position that can be useful to make them more responsive. You can check my solution here and give a feedback too. Keep Coding!

    1
  • Afolabi Oseni•105
    @GoldenAceTechSubmitted almost 4 years ago

    Hello there! This is actually my first project on Frontend Mentor. I just started my Web Development journey so I will appreciate your feedbacks. Let me know what you think and criticize if you have to. Thank you for taking your time to check, have a good day!

    Profile card created with only HTML and CSS

    4
    Fauzan Reza•180
    @codebyfauzanPosted almost 4 years ago

    Great work Afolabi. I think your HTML structure is easier to read and your CSS is more efficient than mine. Also, you should check the font color in the style-guide.md so your solution can be looking as close to the design. I learn a few things from your solution, thank you again. And can I approach you in slack? so we can learn together if you interest please kindly reply to this feedback

    1