Skip to content

fix(event-landing): enforce 16:9 aspect ratio on banner #834

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.

Sign up for GitHub

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

Open
fishman wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(event-landing): enforce 16:9 aspect ratio on banner #834

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/EventLanding.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@
}

.banner {
display: block;
width: 100%;
max-height: 480px;
aspect-ratio: 16 / 9;

@mesutoezdil mesutoezdil Sep 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

this drops the 480px cap, so on a 1140px container the banner is now about 640px tall. in #746 the ask was that banners already look too large on desktop. does this make that worse?

@fishman fishman Sep 2, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

No

@fishman fishman Sep 2, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

The bigger issue is the Kubecon China banner, but that's a normal format. Almost all conference banners are 16/9

@mesutoezdil mesutoezdil Sep 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

the kcd vietnam banner is 1920x1920 and the kubecon jp one is 1920x1080. so cover cuts 44 percent off the square one, which is the banner #746 is about, and leaves the other untouched. is contain plus a background closer to what you want?

@fishman fishman Sep 2, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Everything cuts a part off, the Vietnam banner is 4:3 but allows for 16:9 to keep all the important content.

@mesutoezdil mesutoezdil Sep 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

i measured the file on master and it is 1920x1920, so 1:1 rather than 4:3. at 16:9 that drops 44 percent of the height instead of 25. still fine for the important content?

object-fit: cover;
object-position: center;

@mesutoezdil mesutoezdil Sep 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

object-position already defaults to center, so this line changes nothing. keep it as documentation, or drop it?

@fishman fishman Sep 2, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Not sure, will double check but if true, probably drop it. The other pr that set a fixed width seemed to have caused it to be left aligned, but maybe I saw it wrong.

border-radius: var(--hami-radius-md);
border: 1px solid var(--hami-color-border);
margin-bottom: var(--hami-space-32);
Expand Down