Skip to content
OverviewSolutions
30
Comments
238
Fidel Lim
@fidellim

All comments

  • Petabyte•190
    @peta-8-bitSubmitted about 2 years ago

    If you look closely there is maybe 1px or 2px extra height for the card below the image which just has the background color white. Don't know why it happens or how to make the entire height of the card taken by the image. Please let me know if you can solve it.

    Respinsive Product Preview Card using HTML and CSS

    3
    Fidel Lim•2,775
    @fidellimPosted about 2 years ago

    Hi @Petabyte,

    Congrats on finishing the project!

    To remove the white background color below your image, you could just set your image tag as a block.

    .image img {
    display: block;
    width: 300px;
    border-radius: 10px 0px 0px 10px;
}

    The code above should fix that issue.

    If you are also interested in removing the warning on your accessibility report, you can add this block of code:

    <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://www.frontendmentor.io/profile/peta-8-bit">Petabyte</a>.
  </div>

    inside a <footer> tag.

    Let me know if it works!

    Marked as helpful
    1
  • Fidel Lim•2,775
    @fidellimPosted about 2 years ago

    Hi Kate,

    Congrats on your first Frontend Mentor challenge!

    Just as a suggestion regarding the accessibility report, you can fix that by adding semantic tags such as <section> or <main>. Inside the tag, you can include everything you have written inside your <body> tag.

    You can further have a look at semantic tags here

    Then, you can resubmit your project to check if the warnings are gone.

    Hope it helps!

    0
  • Fidel Lim•2,775
    @fidellimPosted about 3 years ago

    Hi @macpoz,

    Great job finishing the project! It looks great on desktop and mobile devices. Well done! :)

    0
  • Fidel Lim•2,775
    @fidellimPosted about 3 years ago

    Hi @khasTema,

    Great job finishing your first project in Frontend Mentor! It looks great on desktop and mobile devices. You can have a look at your report to get an idea of some issues (accessibility/HTML) you could fix! Well done!

    0
  • Art•420
    @Art-wdtSubmitted about 3 years ago

    Hi! This is my second challenge using Bootstrap. Any advice, comments would be much appreciated.

    I have not followed through with the bootstrap form validation via JS. Therefore, I use the default browser settings of validation

    Intro component with Bootstrap

    1
    Fidel Lim•2,775
    @fidellimPosted about 3 years ago

    Hi @Art-wdt,

    Great job finishing the project! It looks great on desktop and mobile devices. I like it. Well done! You can implement the form validation using JS next time once you are learning it. Also, you can have a look at your report to have an idea of what other issues you could fix. :)

    Marked as helpful
    1
  • othman•120
    @othmanbenhamdouneSubmitted about 3 years ago

    your feedbacks are important to me so don't hesitate to comment down any notice or improvement I can add.

    profile card component challenge

    1
    Fidel Lim•2,775
    @fidellimPosted about 3 years ago

    Hi @othmanbenhamdoune,

    Great job finishing the project! You can try adding the two circles to your background to challenge yourself. Also, it is included in the design. This will be great practice!

    Marked as helpful
    1
  • Fidel Lim•2,775
    @fidellimPosted about 3 years ago

    Hi @Tariqul-huda,

    You can learn Semantic tags with these links: MDN and w3schools.

    To increase mentor score, you can give feedback to other develops by commenting on their work (challengers they did). You could also finish challenges. You can a specific point depending on the difficulty of the challenge.

    Marked as helpful
    1
  • Fidel Lim•2,775
    @fidellimPosted about 3 years ago

    Hi @Nana-Kwame247,

    Great job finishing the project! It looks great on desktop and mobile devices. Some suggestions I would like to share are of the following:

    • you can put the background image in an img tag instead and set the width to 100% so that there are no spaces left.
    • you can add some margin on your component so that there is some space in mobile view.
    • you can add align-items: center; on the .payment-plan class so that the music icon does not look stretched.
    • you can add this code to your component so that it does adapt to the screen width when it decreases:
    .hero-image {
    max-width: 28rem;
    width: 100%;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

    I hope these help :)

    1
  • MarkFalcutila•130
    @markfalcutilaSubmitted about 3 years ago

    Hello let me know what you think about my codes? And if you have any advice to improve it or any kind of feedback don't hesitate to tell me. Thankyou!

    CSS, FLEXBOX

    1
    Fidel Lim•2,775
    @fidellimPosted about 3 years ago

    Hi @markfalcutila ,

    Great job finishing the project! It looks great on desktop and mobile devices. Some suggestions I would like to share are of the following:

    • you don't need to include attribute type on the button tag especially when the type is empty.
    • you can include h2-h6 elements inside a section element.

    I hope this helps :)

    Marked as helpful
    0
  • Nabil-Y•150
    @Nabil-YSubmitted about 3 years ago

    Hi everyone,

    I am a beginner so please tell me if you see anything I can improve on.

    Thank you !

    Nabil-Y

    Social Proof Section

    1
    Fidel Lim•2,775
    @fidellimPosted about 3 years ago

    Hi @Nabil-Y,

    Great job finishing the project! It looks great on desktop and mobile devices. There is just something weird with the layout of your testimonials between 807px and 1310px. Other than that it looks great! Well done :)

    Marked as helpful
    1
  • Fidel Lim•2,775
    @fidellimPosted about 3 years ago

    Hi @Stygan,

    Great job finishing the project! It looks great on desktop and mobile devices. Well done :)

    1
  • Fidel Lim•2,775
    @fidellimPosted about 3 years ago

    Hi @leonardo9245,

    Great job finishing the project! It looks great on desktop and mobile devices. Some suggestions I would like to share are of the following:

    • you can add cursor: pointer on your logo as it is usually a link to your home page.
    • you can add some hover and active effects on other interactive elements.

    I hope these help :)

    Marked as helpful
    1