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

WC Central Theme: Fixing some CSS responsive issues #1024

Conversation

2ndkauboy
Copy link
Contributor

@2ndkauboy 2ndkauboy commented Sep 1, 2023

Fixes Trac: https://meta.trac.wordpress.org/ticket/6747

Props @baroliyamayur

This is a fix to the responsiveness issue reported on Meta Trac in issue 6747. It not only solved this spacing issue, but also two other issues:

  1. The header logo is not positioned/aligned correctly in the different sizes.
  2. The website image is blurry on all larger sizes, as the container is 1px too large
  3. The website images are too small and not aligned with the "About" text

Screenshots

I've made a couple of screenshots using devices that use the problematic screen sizes:

iPhone SE (portrait)

Before After
central wordcamp test_wordcamps_new-site_(iPhone SE)-portrait-before central wordcamp test_wordcamps_new-site_(iPhone SE)-portrait-after

Issues:

  • WordCamp Central logo misaligned

iPad mini (portrait)

Before After
central wordcamp test_wordcamps_new-site_(iPad Mini)-portrait-before central wordcamp test_wordcamps_new-site_(iPad Mini)-portrait-after

Issues:

  • WordCamp Central logo misaligned
  • Website image too small
  • Column too small

iPad mini (landscape)

Before After
central wordcamp test_wordcamps_new-site_(iPad Mini)-landscape-before central wordcamp test_wordcamps_new-site_(iPad Mini)-landscape-after

Issues:

  • WordCamp Central logo misaligned
  • Website image too small
  • Column too small

Surface Pro 7 (landscape) / small laptop

Before After
central wordcamp test_wordcamps_new-site_(Surface Pro 7)-landscape-before central wordcamp test_wordcamps_new-site_(Surface Pro 7)-landscape-after

With these changes applied, the website screenshots are no longer blurry. The "columns" also take up the same space, while the website images are larger. The "WordCamp Central" logo is also aligned with the WordCamp title ("New Site").

Issues:

  • Website image too big and blurry

@2ndkauboy 2ndkauboy force-pushed the fix/6747-wordcamp-central-theme-responsiveness branch 2 times, most recently from f68ee9d to 7d278a9 Compare September 1, 2023 16:37
@2ndkauboy 2ndkauboy force-pushed the fix/6747-wordcamp-central-theme-responsiveness branch from 7d278a9 to 9aca74e Compare September 1, 2023 16:53
Copy link
Contributor

@pkevan pkevan left a comment

Choose a reason for hiding this comment

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

👍

@pkevan pkevan merged commit 32f09b7 into WordPress:production Feb 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Component] Central central.wordcamp.org
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants