sponsor section mobile responsive, without logos added - #33
Conversation
Deploying rp-web-hype with
|
| Latest commit: |
2ad8fa7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://620a31c5.rp-web-hype.pages.dev |
| Branch Preview URL: | https://write2vaniramesh-sponsorsect.rp-web-hype.pages.dev |
Deploying rp-web-admin with
|
| Latest commit: |
2ad8fa7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://ca479d68.rp-web-admin.pages.dev |
| Branch Preview URL: | https://write2vaniramesh-sponsorsect.rp-web-admin.pages.dev |
Deploying rp-web-sponsor with
|
| Latest commit: |
2ad8fa7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://223e4555.rp-web-sponsor.pages.dev |
| Branch Preview URL: | https://write2vaniramesh-sponsorsect.rp-web-sponsor.pages.dev |
39067d3 to
2ad8fa7
Compare
There was a problem hiding this comment.
I think sponsors is getting put as a section on the main page rather than its own route, but this is no problem
There was a problem hiding this comment.
To be honest if this is on the main page it feels just a little like... tall? Especially with the third image (of the racer with the microphone) it would make sense on its own page but I feel like it takes up too much main-page space, is there a way we could make it smaller (at least possibly splitting up the svgs on that third section and laying them out + scaling them differently to make it shorter?) or also what are we using that third bit for, actually?
seventhriver
left a comment
seventhriver
left a comment
There was a problem hiding this comment.
Some random thoughts just to consider as I looked over it but overall very nice!
| @media (max-width: 375px) { | ||
| .character-2 { display: none !important; } | ||
| } | ||
| `} |
There was a problem hiding this comment.
Ok at first I thought this seemed a little funky but actually might be kind of a clean way to do it, but after looking more, actually why is the page built this way? I think I don't know the purpose of this section well enough to understand it atm, are these characters for our sponsors and if so we'd want them all on the screen (so just shrink them all), right? Something else might be going on here that I don't know though so I'd like someone else to look at this but you can maybe just ignore me here
| transition="all 0.3s ease-out" | ||
| transform={ | ||
| hoveredPerson === character.id | ||
| ? "translateY(-10px)" |
There was a problem hiding this comment.
This does cause the bottom of their stools to come off the ground, I assume this is fine but we could try like a stretch/glow/something else if we don't want that
| position="absolute" | ||
| bottom="0" | ||
| left="50%" | ||
| transform="translateX(-50%)" |
There was a problem hiding this comment.
I think it also works to just have it width 100% unless there's something I'm missing (like instead of left+transform), not a big deal tho I think
There was a problem hiding this comment.
Not sure where it's coming from based on a quick look, but the people get a box outline around them briefly when hovered -- like just for a split second on hover you can see the outline of their containing box or something (happens for me on safari/firefox but I think on wide/horizontal view only?) -- maybe look into this, I'll try if I get a chance soon
There was a problem hiding this comment.
Also do we want them to be hoverable (or clickable, or something) on mobile view as well, or are we just planning to show the sponsors a different way like always visible or something
There was a problem hiding this comment.
oh actually that does seem to be there it just wasn't working for me oops -- still though is there a better way to do that on mobile? Maybe worth considering
There was a problem hiding this comment.
But yeah tbh overall looks pretty good to me, very nice!!
3 participants
No description provided.