Make full-width images span the entire viewport on non-sidebar pages#1233
Open
matthewrball wants to merge 1 commit into
Open
Make full-width images span the entire viewport on non-sidebar pages#1233matthewrball wants to merge 1 commit into
matthewrball wants to merge 1 commit into
Conversation
✅ Deploy Preview for bitcoin-design-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
On pages without a sidebar, full-width images were constrained to the .main container max-width (1280px). This breaks them out to the full viewport width using calc(-50vw + 50%) margins, with object-fit cover and a consistent max-height to keep all banner images uniform. Sidebar guide pages are unaffected — they keep existing behavior.
matthewrball
force-pushed
the
fix/full-width-header-images
branch
from
6751519 to
371f71f
Compare
Contributor
|
Thanks for submitting this, but I don't think this is a good change. The header images were designed for a specific size and to be visible without cropping. When they become super wide, they get blurry because the resolution is not high enough, and the cropping can look weird. So I prefer our current approach. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
.maincontainer'smax-width: 1280px, leaving gaps on both sides.-full-widthelements out to the full viewport width usingwidth: 100vwandcalc(-50vw + 50%)marginsmax-heightwithobject-fit: coverfor natural croppingoverflow-x: hiddenon body to prevent horizontal scrollbar from the100vwtechniquePages affected:
/social-media/,/newsletter/,/calendar/,/join/,/projects/,/community/,/collabs/Test plan
/guide/glossary/address/) — should be unchanged/calendar/) are still visible below images