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.

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

Jump to bottom

🐞 Hero image: it should have a maximum height, so that it doesn't take up most of the space on very wide screen sizes #2253

Open
anaulin opened this issue Feb 28, 2024 · 3 comments
Open

🐞 Hero image: it should have a maximum height, so that it doesn't take up most of the space on very wide screen sizes #2253

anaulin opened this issue Feb 28, 2024 · 3 comments
Labels
🐞 bug Something isn't working 🌱 Ready for Dev Stuff we are able to move forward on

Comments

@anaulin
Copy link
Member

anaulin commented Feb 28, 2024

Currently Convene's Hero Image expands to take up the entire available width (as you'd expect from a Hero Image), but also proportionally grows vertically. This results in the image taking up most of the vertical space when using a very wide viewport:
image

Compare with how SquareSpace handles the same ultra-wide viewport:
image

We should update the CSS on the Hero Image to make sure that it doesn't exceed a certain percentage of the screen height (or maybe a set number of pixels?).
@anaulin
Copy link
Member Author

anaulin commented Feb 28, 2024

@rosschapman this might be Relevant To Your Interestes

@anaulin anaulin added the 🐞 bug Something isn't working label Feb 28, 2024
@rosschapman
Copy link
Contributor

My kingdom for a designer! But yes, that is pretty egregious 😅

@zspencer
Copy link
Member

zspencer commented Mar 4, 2024

I'm curious how to do this with ActiveStorage / libvips. My brain struggles to figure out how the constraints for that work.

zspencer added a commit that referenced this issue Mar 7, 2024
@zspencer
🌸 DesignLibrary: Layout is responsible for.... Layout...
515c686 
- #1187
- #2271
- #2253

One of the things we've kept bumping into is that each page has to
decide how wide it wants to be. That doesn't really seem sustainable or
particularly necessary; so now the Layout takes care of:

- Providing a Max-Width on every page
- Ensuring the Layout is centered horizontally
- Ensuring there is appropriate margin from the top
  of the screen
@zspencer zspencer mentioned this issue Mar 7, 2024
Merged
zspencer added a commit that referenced this issue Mar 7, 2024
@zspencer
🌸 DesignLibrary: Layout is responsible for.... Layout... (#2281)
7e24542 
- #1187
- #2271
- #2253

One of the things we've kept bumping into is that each page has to
decide how wide it wants to be. That doesn't really seem sustainable or
particularly necessary; so now the Layout takes care of:

- Providing a Max-Width on every page
- Ensuring the Layout is centered horizontally
- Ensuring there is appropriate margin from the top
  of the screen
zspencer added a commit to zinc-collective/tobias that referenced this issue Mar 25, 2024
@zspencer
🌸 DesignLibrary: Layout is responsible for.... Layout... (zinc-coll…
a92e7f9 
…ective#2281)

- zinc-collective#1187
- zinc-collective#2271
- zinc-collective#2253

One of the things we've kept bumping into is that each page has to
decide how wide it wants to be. That doesn't really seem sustainable or
particularly necessary; so now the Layout takes care of:

- Providing a Max-Width on every page
- Ensuring the Layout is centered horizontally
- Ensuring there is appropriate margin from the top
  of the screen
@anaulin anaulin added the 🌱 Ready for Dev Stuff we are able to move forward on label Aug 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐞 bug Something isn't working 🌱 Ready for Dev Stuff we are able to move forward on
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rosschapman @zspencer @anaulin