Adjust headline size based on screen size

PolicyEngine / policyengine-app

PolicyEngine's free web app for computing the impact of public policy.

GNU Affero General Public License v3.0

35 stars 89 forks source link

Adjust headline size based on screen size #849

Closed ductbuix closed 6 months ago

ductbuix commented 6 months ago

Fix #757 by adjusting headline font size for mobile view and its responsive container.

`🤖[deprecated] Generated by Copilot at 6384d6a`

Summary

📱🛠️🎨

Enhanced the design and functionality of the Hero component on the home page. Made it adapt to different screen sizes and resolutions using src/redesign/components/HomeLanding.jsx.

The Hero component was too plain It needed some tweaks to look sane On different devices It had some vices But now it adapts to the screen

Walkthrough

Adjust the height and width of the Hero and HeroText components to be responsive to the screen size (link, link)
Reduce the font size of the HeroTitle component on mobile to avoid text wrapping or clipping (link)

nikhilwoodruff commented 6 months ago

Thanks for this @ductbuix- just testing it out locally I get this though- any ideas?

ductbuix commented 6 months ago

Thanks for this @ductbuix- just testing it out locally I get this though- any ideas?

@nikhilwoodruff Can you give me more information (screen size, or any condition)? I've tried several responsive sizes but it works still well for the mobile screens.

anth-volk commented 6 months ago

Could this at all be a Safari thing? I know you test in Safari, @nikhilwoodruff, and I've found in the past that I have to use more workarounds, vendor prefixes, etc., when working with it.

anth-volk commented 6 months ago

Interestingly, post-changes, I don't get what Nikhil had mentioned, but I do get this at around 960px:

ductbuix commented 6 months ago

Could this at all be a Safari thing? I know you test in Safari, @nikhilwoodruff, and I've found in the past that I have to use more workarounds, vendor prefixes, etc., when working with it.

Oh, yes! I see, the Safari, let me take a look on it.

Interestingly, post-changes, I don't get what Nikhil had mentioned, but I do get this at around 960px:

Yea, I initially focused on the issue title so I've only fixed for mobile.

So I will try to figure out what happened with Safari and fix the responsive for all screen. Btw, tell me if you know anything about why it broke in the Safari. @nikhilwoodruff @anth-volk

nikhilwoodruff commented 6 months ago

Thanks so much @ductbuix. Not sure I have any useful details to add on the root cause but let me know if you can't reproduce it.

ductbuix commented 6 months ago

Thanks so much @ductbuix. Not sure I have any useful details to add on the root cause but let me know if you can't reproduce it.

Yea, I found the issue, but the fix might need some more changes. I'm on it.

ductbuix commented 6 months ago

Hi @anth-volk @nikhilwoodruff , I've fixed the responsive header, please check it out.

nikhilwoodruff commented 6 months ago

Looks great on my machine, thanks @ductbuix! @anth-volk I think the merge conflict is from your PR, would you mind taking a look at it?

ductbuix commented 6 months ago

Good to merge upon the merge conflict being resolved

@nikhilwoodruff It looks good now.