Bug: Weird margins on the socials in Footer on landscape mode. about landing-page HOT 11 CLOSED

Hi,
This is my first issue report, sorry if I mislabeled anything! If this is a noteworthy issue I'd definitely like to take it on and try to fix it. My initial thought is using media queries to specify the dimensions that are causing the issue and just adding a bit of margin on the right side.

If there is a better way to approach that stays in-line with the codebase standards please let me know! I'd love to contribute.

from landing-page.

@bdougie can i take this

from landing-page.

Please go for it. Just needs to be responsive and can be accomplished with the tailwind classes.

from landing-page.

ok sir

from landing-page.

Apologies @dev-phantom, we probably should have suggested a solution. I'd expect this to wrap the icons by adding a second row of icons.

Let me know if you have thoughts on a solution @HoldUpFjord

from landing-page.

oh okay sir

from landing-page.

Ah I need to self assign in the future! That's my mistake.

from landing-page.

I think your solution is a good one @bdougie! Are you imagining using "flex-flow" to drop down icons one-by-one? Or are you imaging a breakpoint where half the icons move down to the second row to keep a visual symmetry?

If it's the former it seems like adding the tailwind class flex-wrap: https://tailwindcss.com/docs/flex-wrap to the div holding the icons provides a fix as seen here:

It's hard for me to say exactly where that class needs to be changed as I'm still getting acquainted with the codebase. It seems like I might need to be added to the Sanity CMS? I'll keep poking around and try to find the exact line that needs to be changed!

from landing-page.

Without being able to run it, I think it's line 50 in: components\common\SocialLinks.tsx that needs the "Flex-flow" class in the above solution!

from landing-page.

Hi @HoldUpFjord, another possible solution is here to apply mr-5

from landing-page.

Hey @NsdHSO!

I believe @bdougie mentioned wanting a solution that wraps the icons. I was just able to get the page running locally and confirmed the flex-wrap works. It looks @dev-phantom already updated the change, so we should be good!

from landing-page.