Submitted almost 2 years ago

Hibiscuit0 NFT component

Hibiscuit• 30

@Hibiscuit0

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

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

@Aatypic

Posted almost 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

Hibiscuit• 30

@Hibiscuit0

Posted almost 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..

Please log in to post a comment

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