Skip to content
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

Fix display issues in README with tables and logo #198

Merged
merged 6 commits into from
Apr 23, 2021
Merged

Fix display issues in README with tables and logo #198

merged 6 commits into from
Apr 23, 2021

Conversation

kaushikpadmanaban
Copy link
Contributor

Fix: Banner unresponsive to changing screen size

Bug discussed here

This commit:

  • Fixes unresponsive banner size by removing max-width property.
  • Adds a table-container class and tags all tables in order to give them universal properties,
    such as horizontal scrolling.
  • Fixes the allcontributors table, which had similar problem as the banner, by:
    • Adding a #contributors and giving all td inside #contributors a min-width property.
      (This ensures that all profiles inside appear in orderly fashion, instead of the ones
      in the centre being squashed to adjust to screen size.
    • Nesting this div inside .table-container to enable horizontal scrolling.

As a result, the entire homepage is now mobile-friendly, and can accommodate screens as low as 320px wide.
Also, the contributors tab looks a lot better than GitHub's own rendering of the README.md.

webpagefinal

* Website fix (#2)

* Added class: table-container

* Added .table-container to CSS file

* Added #contributors

* Added #contributors to css file.

Added min-width property to #contributors.

* Removed .table-containers from #contributors

* Revert

* Removed class table-container from contributors

* Changing td in #contributors

* Adding .table-container

* Website fix 3 (#3)

* Added class: table-container

* Added .table-container to CSS file

* Added #contributors

* Added #contributors to css file.

Added min-width property to #contributors.

* Removed .table-containers from #contributors

* Revert

* Removed class table-container from contributors

* Changing td in #contributors

* Adding .table-container

* Added final project table to #table-container
Copy link
Member

@sglavoie sglavoie left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That looks good to me. Thank you @kaushikpadmanaban. 🙂

README.md Outdated Show resolved Hide resolved
README.md Outdated Show resolved Hide resolved
README.md Outdated Show resolved Hide resolved
README.md Outdated Show resolved Hide resolved
README.md Outdated Show resolved Hide resolved
@@ -167,3 +167,12 @@ pre code {
display: inline-block;
box-shadow: none;
}
#contributors td{
min-width: 130px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that was a great solution to make it look nice on mobile. 🙂

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @sglavoie 😅

@sglavoie sglavoie changed the title Fix bug mentioned in #196 Fix display issues in README with tables and logo Apr 23, 2021
@sglavoie sglavoie merged commit d9bcf9f into world-class:master Apr 23, 2021
@sglavoie
Copy link
Member

@all-contributors please add @kaushikpadmanaban for a11y, bug, code, design

@allcontributors
Copy link
Contributor

@sglavoie

I've put up a pull request to add @kaushikpadmanaban! 🎉

@ankush
Copy link
Contributor

ankush commented Apr 23, 2021

Looks good now 😁 Thanks @kaushikpadmanaban

@kaushikpadmanaban
Copy link
Contributor Author

Thank you @ankush and @sglavoie! It was a little scary, and you guys were very accommodating.

@sglavoie
Copy link
Member

You're welcome @kaushikpadmanaban! It is our duty to honour the meaning of the badge. 😁

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants