Added board members to grid and made aspects responsive#60
Conversation
yubinzhen
left a comment
yubinzhen
left a comment
There was a problem hiding this comment.
looks good so far! if you can try to center some of the board members, that'd be great but it's okay if you can't. can you make the grid have 3 board members per row on lg screens, 2 board members per row on md screens, and 1 board member per row on sm screens.
|
|
||
| <div className="flex flex-col items-center gap-0.5 text-center"> | ||
| <p className="text-nsbe-yellow-100 text-2xl font-extrabold">{name}</p> | ||
| <p className="text-nsbe-yellow-100 text-3xl font-extrabold">{name}</p> |
| src={image} | ||
| alt={name} | ||
| className="border-nsbe-yellow-100 aspect-square w-[20vw] rounded-full border-3 object-cover" | ||
| className="border-nsbe-yellow-100 aspect-square w-[20vw] rounded-full border-4 object-cover" |
There was a problem hiding this comment.
try to avoid hard coding the width. use code like w-1/2. the current size of the image is a little large, make it a little smaller
|
|
||
| <div className="flex flex-col items-center gap-0.5 text-center"> | ||
| <p className="text-nsbe-yellow-100 text-2xl font-extrabold">{name}</p> | ||
| <p className="text-nsbe-yellow-100 text-3xl font-extrabold">{name}</p> |
There was a problem hiding this comment.
make sure to adjust text size according to screen size too
I added the requested changes, is it alright if we take care of the image cropping a little later? |
2 participants
I found that the page responsiveness adds a little gap to the side on phone screens, but that should probably clear up once the navbar is responsive. The images are still a little off-center but nothing too alarming. Theres also more members than the figma so I did 2:3:3:4.
fixes #42