Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
9
Comments
4
Aditya Pratap
@aditya3284

All comments

  • Abdushakur•150
    @abdushakurob
    Submitted about 2 years ago

    Rating Component

    1
    Aditya Pratap•150
    @aditya3284
    Posted about 2 years ago

    Hey @abdu-shakur,

    👉 body can use a min-height:100dvh display: flex; flex-direction: column; align-items: center; justify-content: center;, which will place your rating component in center of the screen.

    👉 And you can remove align-items: center;, justify-items: center; from the div with general class.

    I hope this helps you. Cheers

    Happy coding 👍

    Marked as helpful
  • Ahmed Iyanuoluwa•130
    @iyanu752
    Submitted over 2 years ago

    Article-preview-component

    1
    Aditya Pratap•150
    @aditya3284
    Posted over 2 years ago

    Hey @iyanu752,

    I found your solution in my feed.

    You are facing the issue of not able to use images when you host then, i think it is because

    👉 you are using the relative address of the images in the src, which is alright, but what happens is that, due to the nature of relative addressing the browser tries to find the images relative to the file, in this case index.html.

    But as you have not uploaded the images folder to the repo, its not able to find it, falling back to the alt text of the image.

    Solution : Simply added the images folder to the repo, then you favicon, article image and avatar image will work as intended.

    👉 Also your accessibility report is showing that you don't have a h1, so try to utilize h1 before using h2.

    I hope this helps you.

    Cheers

    Happy coding 👍

    Marked as helpful
  • LuchoUrtubey•20
    @LuchoUrtubey
    Submitted over 2 years ago

    Profile Card using HTML-CSS

    1
    Aditya Pratap•150
    @aditya3284
    Posted over 2 years ago

    Hey Lucho, good job

    I too submitted my solution for the same challenge, and found your's in my feed.

    Your solution looks great however I think that their can be some modifications.

    👉 body can use a min-height:100vh, which will make it take the whole screen's height.

    👉 And also instead of using margins to position the card element at the center of the screen, utilize display:grid; or display:flex and then use property like place-items.

    I hope this helps you.

    Cheers

    Happy coding 👍

    Marked as helpful
  • Abhilash S Hathwar•20
    @Abhilash437
    Submitted over 3 years ago

    Responsive NFT preview card component

    3
    Aditya Pratap•150
    @aditya3284
    Posted over 3 years ago

    Hey Abhilash, good job

    Keep up the good work

    Your solution looks great however I think that the hr that you are using needs a bit more size or opacity, as its not visible properly. And try to use other units instead of % on your main container, as % changes based on the parent element, in this case parent element is the body and change in its width changes your components width.

    @ccreusat has given a good solution of that.

    I hope this helps you in your coding journey

    Cheers

    Happy coding 👍

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

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