Skip to content
Submitted about 1 year ago

Planet Facts - Only Astro SSG

Gustavo•80
@cantocaracruz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Planets fact site
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Disclaimer: this is my very first Astro project so the code may look kind of messy.

I have only one problem: I can't figure out why on mobile the layout is cut in the 4th card (the temperature one). It doesn't happen when I test it on desktop, even when using the responsive tool, at any width or height the layout seems normal, but when I open it in my phone it has that specific problem. Other than that it works

Community feedback

  • A B•900
    @ABojoPosted about 1 year ago

    I believe the address bar that is present on mobile devices is what's causing the card to be cut off. The two solutions that should work are: adding a height of 100% to the html element, or giving the body a height of 100dvh, rather than 100%.

    1
  • Saad Hisham•1,750
    @Saad-HishamPosted about 1 year ago

    This is very nice the animation when toggle too was amazing great job 🥰

    1
    Gustavo•80
    @cantocaracruzPosted about 1 year ago

    it's all Astro's view transitions api

    1

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