Responsive Space Tourism built in React and Tailwind

Solution retrospective
Hi everyone, hope everyone is well. Here is my solution for the Space Tourism Challenge.
Some difficulties I had are:
-
Having a concise way to make it responsive, I find it hard to give everything a specific size because I am unsure if it'll look the same for others. Is there a "perfect" way to make everything responsive or is using breakpoints like tailwind's (xs, md, lg..) decent enough?
-
I am unsure of my approach to hide and display certain components based on the size of the screen. Like in the Crews page, I have two image components, 1 is above the bio and the other under the bio. I used the "hidden" to hide one depending on the screen size. What is a better approach to this?
Overall, it was very fun building this. Any feedback/tips will be helpful. Thanks in advance!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @mukwende2000
tailwind breakpoints are just fine, make sure you do mobile first approach where you design for mobile first and move on to larger devices. As for the images, you have to use the picture html tag, which allows you to show different images based on certain condtions
<picture> <source media="(min-width: 768px)" srcset="img1.jpg"> <source media="(max-width: 768px)" srcset="img2.jpg"> <img src="default.jpg"> </picture>
Here the img1.jpg will show on screen 768px and above, anything belown that will show the img2.jpg, if for some reason, like if the user's browser doesn't support picture tag, then the default.jpg will show, its important that you include in otherwise the entire thing will be ignored
Marked as helpful
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