Fix CSS responsive image on About page for GitHub Triage team members… #794
Conversation
Summary of ChangesHello @iakgoog, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request addresses an issue with the responsive display of team member images on the About page. By adjusting the CSS width properties for these avatars, the changes ensure that the images scale correctly and maintain an appropriate size across various screen dimensions, particularly for GitHub Triage team members and coordinators. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
Here's the code health analysis summary for commits Analysis Summary
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
The pull request modifies the about.md file to adjust the size of the team member avatars on the About Us page, specifically for the GitHub Triage and Brisbane Moderators sections. The image widths are reduced for smaller screen sizes (w-32 to w-20 and md:w-40 to md:w-28) while maintaining the larger size for larger screens (lg:w-[120px]).
| <div class="flex flex-wrap justify-center items-end gap-6 mb-8"> | ||
| <a href="https://github.com/michal-duszak" class="flex flex-col items-center text-center team-role team-role-github-triage text-team-role-github-triage"> | ||
| <img class="w-32 md:w-40 lg:w-[120px] aspect-square rounded-full object-cover mb-2" src="{{ '/assets/avatars/michal-duszak.jpeg' | url }}" alt="Michal Duszak avatar" /> | ||
| <img class="w-20 md:w-28 lg:w-[120px] aspect-square rounded-full object-cover mb-2" src="{{ '/assets/avatars/michal-duszak.jpeg' | url }}" alt="Michal Duszak avatar" /> |
There was a problem hiding this comment.
The initial width w-32 has been reduced to w-20. Ensure this change doesn't negatively impact the visual balance and readability of the avatars on smaller screens. Consider testing on various devices to confirm the responsiveness and aesthetics.
| <img class="w-20 md:w-28 lg:w-[120px] aspect-square rounded-full object-cover mb-2" src="{{ '/assets/avatars/michal-duszak.jpeg' | url }}" alt="Michal Duszak avatar" /> | |
| <img class="w-20 md:w-28 lg:w-[120px] aspect-square rounded-full object-cover mb-2" src="{{ '/assets/avatars/michal-duszak.jpeg' | url }}" alt="Michal Duszak avatar" /> |
| <div class="flex flex-wrap justify-center gap-6"> | ||
| <a href="https://github.com/therealnugget" class="flex flex-col items-center text-center team-role team-role-coordinator text-team-role-coordinator"> | ||
| <img class="w-32 md:w-40 lg:w-[225px] aspect-square rounded-full object-cover mb-2" src="{{ '/assets/avatars/therealnugget.jpeg' | url }}" alt="therealnugget avatar" /> | ||
| <img class="w-20 md:w-28 lg:w-[120px] aspect-square rounded-full object-cover mb-2" src="{{ '/assets/avatars/therealnugget.jpeg' | url }}" alt="therealnugget avatar" /> |
There was a problem hiding this comment.
Similar to the previous change, the initial width w-32 has been reduced to w-20 here as well. Verify that this adjustment maintains a consistent look and feel across all team member avatars, especially on smaller screens.
| <img class="w-20 md:w-28 lg:w-[120px] aspect-square rounded-full object-cover mb-2" src="{{ '/assets/avatars/therealnugget.jpeg' | url }}" alt="therealnugget avatar" /> | |
| <img class="w-20 md:w-28 lg:w-[120px] aspect-square rounded-full object-cover mb-2" src="{{ '/assets/avatars/therealnugget.jpeg' | url }}" alt="therealnugget avatar" /> |
jbampton
left a comment
jbampton
left a comment
There was a problem hiding this comment.
Do not change the size of Thomas / therealnugget.
He needs a big avatar
|
Hey @iakgoog I sent you an invite to join the Brisbane Social Chess Inc GitHub Organization. The invite will go to your email. Thanks once again 👍 |
2 participants
… (#791)
