search

mhyfritz / astro-landing-page

An Astro + Tailwind CSS Example/Template for Landing Pages
https://astro-moon-landing.netlify.app/
MIT License
522 stars 191 forks source link

Overflow for splash.astro (poss like issue 9) #16

Open StephanLuis opened 4 months ago

StephanLuis commented 4 months ago

There is a problem with overflow on the index.astro page component. Content from the two columns spills over to the . You can see the problem on mobile landscape screens On your github repo it's not that noticeable: Screenshot 2024-04-17 101514

But on my homepage it's a problem: Screenshot 2024-04-17 102422

I've only been able to add tailwind class overflow-auto, which sometimes adds a second scrollbar which isn't great for mobile! Thanks for having a look into this!

mhyfritz commented 4 months ago

Hey, thanks for your report! I've adjusted the styles so that the splash screen looks fine on my phone (iPhone SE, 667x375). The key was to reduce the sizes of the icons and text on smaller screens. Depending on your specific needs, you might have to tweak this a bit differently or use an alternative layout. Hope that helps!

StephanLuis commented 4 months ago

That's a little better After-Screenshot 2024-04-20 085451 more or less that's what I did, but it limits what can be displayed. The text is cramped and confused with the menu.

I'm not sure how the menu is implemented, how it's at the bottom of the first section and top for the rest... is there any way to adjust the component height to incorporate the size of the menu. Somehow with the more narrow vertical orientation --one column-- it is not a problem.

mhyfritz commented 4 months ago

Try using vmin units for the tagline's font size (like 10vmin). I still need to find some time to look into this myself, but maybe you can get it working for your case in the meantime.

StephanLuis commented 4 months ago

Issue seems to involve <HeroImage /> but not sure how to proceed ....