Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
StephanLuis opened this issue Apr 18, 2024 · 4 comments
Open

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

StephanLuis opened this issue Apr 18, 2024 · 4 comments

Comments

@StephanLuis
Copy link

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

StephanLuis commented Apr 29, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants