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

Submitted

Planets Fact Site

#tailwind-css#typescript#react
P
Travis Barnetteโ€ข 330

@barnettet31

Desktop design screenshot for the Planets fact site coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any ideas to keep the planet from shifting the entire page on swap? I'm thinking maybe a minimum height.

Community feedback

Hyronโ€ข 5,870

@hyrongennike

Posted

Hi @barnettet31,

Is there a specific reason why the planets are different size?

if you removed the padding top on main and make all the other planets exactly like mercury in terms of image size there won't be any shifting and all of the information could fit into the viewport.

Marked as helpful

1

P
Travis Barnetteโ€ข 330

@barnettet31

Posted

@hyrongennike Yes! I just looked at the demo and assumed they all needed to be a different size! That is actually a fix for my problem, lemme try that really quick because it would be super quick

0
P
Travis Barnetteโ€ข 330

@barnettet31

Posted

@hyrongennike Actually that looks a lot better! Thanks so much for the advice! It's people like you that help people like me get better!

0
P
Justin Greenโ€ข 2,610

@jgreen721

Posted

I think the planet sizes are fitted to match actual size (IE Jupiter is big) so I wouldn't make them uniform. Maybe a parent-container for the images thats set large enough to support all image sizes. Just a guess.

Nice job on it as is though.

Marked as helpful

1
Hyronโ€ข 5,870

@hyrongennike

Posted

@jgreen721 yeah figured that too but as there's no mention of size in the brief and also no scale comparison of the planets next to each other it just looks like it's broken or unfinished other way would be to have a container set to the largest planet's height to prevent the shifting.

Marked as helpful

0
Miran Leginโ€ข 620

@miranlegin

Posted

Hi Travis,

congratulations on completing this challenge. Looks like a lot of fun. Since i don't have Pro subscription i'm not able to view design files but looking at the preview screens it seems to me that image on the desktop version takes at least 2/3 of the window width so i would wrap the image inside the container and center it accordingly. Jumps are happening because the content on every page is not the same and flexbox works in a way to make additional room if needed sort of speak.

Also this layout reminds me of sticky footer kinda thing and there is definitely more than enough room to stretch the page to the bottom. Sticky Footer

Keep coding!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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