Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions10Comments10

All comments

  • Nicolás Pírez• 40

    @NicolasPirezGit

    Submitted

    Hey everyone! 👋🙂 I'm submitting my second project since starting out on this platform.

    While I believe I managed to make it look decently similar to the original I'm not 100% satisfied with the end result.

    I have a couple of questions I'd really appreciate you helping me out with:

    • The project is "responsive", if by that you mean it looks as it is supposed to on a 1440 * 900 desktop, 768 * 1024 tablet and 375 * 667 mobile device. But if I try to dynamically adjust the viewport it just looks awful. Have I misunderstood the assignment? Should I make it look good at ANY device's width and height?

    • Since I couldn't come up with anything else to properly place the 'Pod' logo and those dot patterns where they should be, I had to resort to absolute positioning. Same for the 'Request access' button inside the email form. Was there a better way to position those elements without using absolute positioning?

    • Due to previous feedback I've gotten from the community on my first project I decided to add HTML semantic elements to make the page somewhat more accessible. Can you find any major mistakes on my code regarding that aspect?

    • BONUS QUESTION: I wanted to keep this to three questions only but this one is just bugging me so much. When developing the mobile layout, specifically, when trying to add the mobile image as a background, I came across this weird behavior from CSS who consistently ignored the image's relative path. I tried like a million things but in the end I just had to give up and place a copy of the mobile image on the 'css' folder and only then it worked. Why would that happen? Did I mess something up with my files or is it like a CSS bug?

    That will be all. Thanks in advance to anyone kind enough to leave a comment and hope to be back with another project really really soon. Happy coding! 🥳🎉

    Responsive access page using flexbox

    2

    Aldo Adabunu• 290

    @KwakuAldo

    Posted

    Your site isn't responsive, it doesn't look good on mobile. It really looks good on desktop based on the screenshot comparison with the design. You should make the mobile design as the jpg in the design folder.

    1
  • Aldo Adabunu• 290

    @KwakuAldo

    Posted

    Hello Sam, you need to put a hover state on the image. You can have a look at my solution here to help you with that https://www.frontendmentor.io/challenges/nft-preview-card-component-SbdUL_w0U/hub/nftpreviewcardcomponentmain-made-with-css-flexbox-QYjZ70xgz

    Marked as helpful

    0
  • Aldo Adabunu• 290

    @KwakuAldo

    Posted

    1. Always try and use semantic html, instead of <div class="container"> use the html main element, then section the cards. Avoid using too many divs.

    2. you should set a max-width rule for your body element to avoid it over stretching on wider screens, my suggestions is to use max width 1080-1280(anything between these numbers shd be okay for this challenge)

    3. Also try and use the font-family that was specified.

    Everything else looks good. Happy Coding! 💪🏿

    Marked as helpful

    0
  • Aldo Adabunu• 290

    @KwakuAldo

    Posted

    You need to put some margin between the elements, particularly between your <p> tags to make the layout cleaner, also in mobile view the cards are to narrow, try adding some width to it fill up the screen a bit.

    Marked as helpful

    0
  • Aldo Adabunu• 290

    @KwakuAldo

    Posted

    you need to set a max-width for the body to about 1440px, the element stretches too much that it sqews the design, plus you are leaving a lot of white space at the bottom of the section containers.

    Other than that everything seems fine and dandy, happy coding 💪🏿

    Marked as helpful

    0
  • Danny Gomes• 120

    @dannygomes

    Submitted

    I used CSS grid to try learning it. I struggled quite a bit, not sure if it was the best approach here or if I just botched it. Anyway, have a nice day.

    Edit: Updated live site to try and see if I can make the color better.

    Stats preview card component challenge - HTML & CSS

    1

    Aldo Adabunu• 290

    @KwakuAldo

    Posted

    Hello Danny, this looks great. The mobile design is almost pixel perfect. Well done.

    1
  • Arnold Rubi• 20

    @arnoldrubi

    Submitted

    Hi guys! This is my second output for Front End Mentor. I used multiple box shadows to get the subtle shapes behind the NFT card. I don't know if this is the right method. Feedback are much appreciated. Thank you and cheers from the Philippines!

    NFT Card Component

    4

    Aldo Adabunu• 290

    @KwakuAldo

    Posted

    You need to adjust the "3 days left", push it a bit to the right.

    1
  • Aldo Adabunu• 290

    @KwakuAldo

    Posted

    This looks good, try and use semantic html more, and make sure all the elements are in one landmark container.

    0
  • Ayush Nath• 360

    @Beats-Ayush

    Submitted

    The page is not much flexible or responsive. Lots of hard-coding which I want to remove. I gave a width of 300px which is less than the 375px for Mobile device width which is why it's not responsive. Feedback on how I can improve my responsive skills will be appreciated.

    Desktop and Mobile NFT preview card challenge using HTML, CSS

    5

    Aldo Adabunu• 290

    @KwakuAldo

    Posted

    Don't declare an absolute width value for the body. DO something like this: body { width: 100%; }

    main { width: 350px; max-width: 414; }

    That way the page is already set up for mobile view also since the main component does not need to be large for desktop.

    Marked as helpful

    0
  • Jennifer• 220

    @Jennifer1919

    Submitted

    Hi! Can someone help with the accessibility issues? I don't know anything about ARIA so if you have any ressources please feel free to share!

    Order Summary Component Main

    2

    Aldo Adabunu• 290

    @KwakuAldo

    Posted

    How did you get the element to center so that in landscape view on mobile it is scrollable?

    0