-
Notifications
You must be signed in to change notification settings - Fork 0
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
stanley/whyjoin #86
stanley/whyjoin #86
Conversation
src/components/home/WhyJoin.jsx
Outdated
<div className="p-16 flex flex-col items-center"> | ||
<div className="absolute w-1/3 aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" /> | ||
<Title subTitle="GET INVOLVED AND MAKE AN IMPACT!" title="WHY JOIN EWB" /> | ||
<div className="relative text-center pt-12 ml-72 mr-72 "> |
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.
instead of margin, try a fraction width like w-9/12
return ( | ||
<div className="p-16 flex flex-col items-center"> | ||
<div className="absolute w-1/3 aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" /> | ||
<Title subTitle="GET INVOLVED AND MAKE AN IMPACT!" title="WHY JOIN EWB" /> |
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.
go into the title component and add a z-10 to the className, because sometime the title is behind the circle
src/components/home/WhyJoin.jsx
Outdated
const WhyJoin = () => { | ||
return <div>WhyJoin</div>; | ||
return ( | ||
<div className="p-16 flex flex-col items-center"> |
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.
if it is just for vertical padding, try py-16 and for the horizontal you can use width to style it so it can be more responsive.
src/components/home/WhyJoin.jsx
Outdated
activities. We hope that through these activities, students will grow as | ||
skilled professionals and leaders. | ||
</div> | ||
<div className="grid grid-cols-2 gap-4 my-12 mx-72"> |
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.
do width instead of mx
added why join section + small changes to focus.jsx to fix grid content layout