Responsive NFT card using CSS with his unique capabilities for styling
Solution retrospective
Hello everyone ,this was my 3th project here !Thank you so much ,FrontEnd Mentors !It's worth every second to practise the things ,which you have learned and turn them into something real .
I am not very familiar how the project could be responsive for mobile and desktop devices . If I need to improve something in my code to turn the project into a fully responsive mode , I would be very grateful to receive an advice .
Thank you !
Please log in to post a comment
Log in with GitHubCommunity feedback
- @joshdail
Nice job!
From what I can tell, your project is fine as far as appearing correctly on desktop and mobile. One good thing is that you are using rem for font sizes and not pixels. That can be important also for accessibility. Also, I see you are using CSS custom properties which are very helpful for responsive design.
As far as responsive design for desktop/tablet/mobile, I generally will use media queries for different screen sizes. So I might have @media (width < some_width) for mobile, then another for tablet size, and so on. I will use Chrome or Firefox Devtools to see where the app starts to break or look incorrect at a certain width, and use that as a basis for where to switch from desktop to tablet or mobile.
Using Flexbox and Grid for your page layouts is also great for responsiveness, since for Flexbox you can change rows to columns as the screen shrinks, and with Grid you can change the rows and columns as needed to fit different sizes.
Kevin Powell has a great Youtube channel and also a free course on responsive design on his website https://www.kevinpowell.co, you may find that helpful
Marked as helpful - @SlavenaDuhneva
Thank you so much for your great advices about the responsive mode and the benefits of the Grid and Flexbox mode . I already checked the Kevin Powell's videos in Youtube last night and the information, which he provides us is so valuable, especially for those of us who just started learning CSS !!!
Best wishes!
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