Bug: Contributors Hall of Fame images are vertically stretched in Safari #3662
Assignees
Labels
Status: In Progress
This issue/PR has ongoing work being done
Type: Bug
Involves something that isn't working as intended
Comments
jasonisrailov
added
Status: Needs Review
|
Thanks for reporting this @jasonisrailov, would you like to take it on? |
KevinMulhern
removed
the
Status: Needs Review
Hi @KevinMulhern! Yes, I would love to take this issue on! |
|
Thanks @jasonisrailov 💪 |
KevinMulhern
added
the
Status: In Progress
Closed
2 tasks
This was referenced Mar 28, 2023
KevinMulhern
pushed a commit
that referenced
this issue
Apr 1, 2023
) <!-- Thank you for taking the time to contribute to The Odin Project. In order to get this pull request (PR) merged in a reasonable amount of time, you must complete this entire template. --> ## Because <!-- Summarize the purpose or reasons for this PR, e.g. what problem it solves or what benefit it provides. --> This solves issue with Ryan's contributor image having a different size from the others as shown in the [comment to PR#3707.](#3707 (comment)) ## This PR <!-- A bullet point list of one or more items describing the specific changes. --> - Added Ryan's Image to repo - Changed source of image from Ryan's GitHub profile picture to the repo folder - Updated Ryan's GitHub URL from old URL to the new one - All other changes mentioned in #3707 ## Issue <!-- If this PR closes an open issue in this repo, replace the XXXXX below with the issue number, e.g. Closes #2013. If this PR closes an open issue in another TOP repo, replace the #XXXXX with the URL of the issue, e.g. Closes https://github.com/TheOdinProject/curriculum/issues/XXXXX If this PR does not close, but is related to another issue or PR, you can link it as above without the 'Closes' keyword, e.g. 'Related to #2013'. --> Closes #3662 ## Additional Information <!-- Any other information about this PR, such as a link to a Discord discussion. --> Initial PR: #3707 ## Pull Request Requirements <!-- Replace the whitespace between the square brackets with an 'x', e.g. [x]. After you create the PR, they will become checkboxes that you can click on. --> - [x] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md) - [x] The title of this PR follows the `keyword: brief description of change` format, using one of the following keywords: - `Feature` - adds new or amends existing user-facing behavior - `Chore` - changes that have no user-facing value, refactors, dependency bumps, etc - `Fix` - bug fixes - [x] The `Because` section summarizes the reason for this PR - [x] The `This PR` section has a bullet point list describing the changes in this PR - [x] I have verified all tests and linters pass after making these changes. - [x] If this PR addresses an open issue, it is linked in the `Issue` section - [ ] If applicable, this PR includes new or updated automated tests
KevinMulhern
pushed a commit
that referenced
this issue
Apr 1, 2023
<!-- Thank you for taking the time to contribute to The Odin Project. In order to get this pull request (PR) merged in a reasonable amount of time, you must complete this entire template. --> ## Because <!-- Summarize the purpose or reasons for this PR, e.g. what problem it solves or what benefit it provides. --> This solves the bug on the [Contribute Page](https://www.theodinproject.com/contributing) Hall of Fame section where the images are vertically stretched using the Safari browser. ## This PR <!-- A bullet point list of one or more items describing the specific changes. --> - Removed the class `h-full` from each image. This was forcing all images to have a `height:100%`. - When the `h-full` class is removed, the `height:auto` is set with the code below: `img, video { height: auto; max-width: 100%; }` ## Issue <!-- If this PR closes an open issue in this repo, replace the XXXXX below with the issue number, e.g. Closes #2013. If this PR closes an open issue in another TOP repo, replace the #XXXXX with the URL of the issue, e.g. Closes https://github.com/TheOdinProject/curriculum/issues/XXXXX If this PR does not close, but is related to another issue or PR, you can link it as above without the 'Closes' keyword, e.g. 'Related to #2013'. --> Closes #3662 ## Additional Information <!-- Any other information about this PR, such as a link to a Discord discussion. --> ## Pull Request Requirements <!-- Replace the whitespace between the square brackets with an 'x', e.g. [x]. After you create the PR, they will become checkboxes that you can click on. --> - [x] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md) - [x] The title of this PR follows the `keyword: brief description of change` format, using one of the following keywords: - `Feature` - adds new or amends existing user-facing behavior - `Chore` - changes that have no user-facing value, refactors, dependency bumps, etc - `Fix` - bug fixes - [x] The `Because` section summarizes the reason for this PR - [x] The `This PR` section has a bullet point list describing the changes in this PR - [x] I have verified all tests and linters pass after making these changes. - [x] If this PR addresses an open issue, it is linked in the `Issue` section - [ ] If applicable, this PR includes new or updated automated tests
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Complete the following REQUIRED checkboxes:
Bug: brief description of bugformat, e.g.Bug: Lesson complete button does not update on clickThe following checkbox is OPTIONAL:
1. Description of the Bug:
The Contribute Page has a bug with the images in the Hall of Fame section showing as stretched vertically. This issue did not occur on Chrome or Firefox browsers and only occurs using the Safari browser on Mac, iPad, and iPhone as shown below:
macOS Safari Browser:
iPadOS Safari Browser:
iOS Safari Browser:
2. How To Reproduce:
3. Expected Behavior:
4. Desktop/Device:
Device: MacBook Pro
Device: iPad Pro
Device: iPhone
5. Additional Information:
I tested this issue with a private window in other browsers. The screenshot below shows the expected behavior of the Hall of Fame section on the same macOS device as above in the Chrome browser.
The text was updated successfully, but these errors were encountered: