Skip to content
Submitted about 2 years ago

Hibiscuit0 NFT component

Hibiscuit•30
@Hibiscuit0
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi,

I've seen that at some screen sizes, my footer comes next to my main component and I don't understand why (for example, on Edge "Nest Hub" screen 1024 x 600 and on my Samsung galaxy S7). I guess that it is because of my flexbox but I don't understand the reason of this problem.

Do you have any clue why it is happening ?

Thanks a lot

Community feedback

  • Aatypic•490
    @AatypicPosted about 2 years ago

    Hello and congratulations on your solution !

    Concerning your problem, you are right it is because of flexbox ;) Is is actually the flex-flow: column wrap you have in this case the wrap saying if you have enough space be in one line if not wrap it. To fix it you could instead remove le line and do a flex-direction: column.

    Again some devices are weird, I never tried any of my design on a Nest hub haha.

    I think your design looks good.

    Good luck ✌️

    Marked as helpful
    0
  • Hibiscuit•30
    @Hibiscuit0Posted about 2 years ago

    Thanks for your advice. It works. I had a confusion with the wrapping notion: it was absolutely not needed to wrap.

    But I still don't understand why the footer wrapped since I defined its width of 100vw, so there is still some concepts to learn..

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord