-
Notifications
You must be signed in to change notification settings - Fork 0
Fix: mobile Find Us layout #127
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
base: dev
Are you sure you want to change the base?
Conversation
CadeJordan
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Check the Figma to see how the mobile (and desktop) version should look.
src/components/home/FindUs.tsx
Outdated
| alt="Second image of VSA Logo" | ||
| className="border-vsa-green-400 aspect-square w-1/5 border-2 object-contain" | ||
| /> | ||
| <section className="bg-vsa-yellow-100 flex flex-col items-center justify-center px-6 py-12 md:px-20 md:py-20"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
use div instead of section. Also, bg should be green and w-full.
src/components/home/FindUs.tsx
Outdated
| <div className="mt-8 flex flex-col gap-6 md:flex-row md:items-start md:justify-center md:gap-0"> | ||
| <div className="self-end md:self-auto"> | ||
| <Image | ||
| src={VSAlogo} | ||
| alt="First image of VSA Logo" | ||
| className="border-vsa-green-400 md:w-200px md:h-200px aspect-square w-1/2 max-w-xs border-2 object-contain md:w-1/5" | ||
| /> | ||
| </div> | ||
| <div className="self-start md:self-auto"> | ||
| <Image | ||
| src={VSAlogo} | ||
| alt="Second image of VSA Logo" | ||
| className="border-vsa-green-400 md:w-200px md:h-200px aspect-square w-1/2 max-w-xs border-2 object-contain md:w-1/5" | ||
| /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The top image should be right aligned and the bottom should be left aligned. See the figma mobile section for more details on how it should look.
src/components/home/FindUs.tsx
Outdated
| <p className="text-vsa-brown font-vsa-main w-7/12 text-left text-4xl font-bold md:text-5xl"> | ||
| Find Us! | ||
| </p> | ||
| <p className="text-vsa-brown font-vsa-alt w-7/12 pt-4 text-left text-lg md:text-2xl"> | ||
| Come meet us at tabling by the Bell Tower every Wednesday | ||
| </p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
use w-full
Summary
Testing