[BUG] Header image keeps getting cut off - Githubissues

SethCram / SethCram.github.io

Seth Cram's professional portfolio that includes a downloadable resume, social media links, summary, skills, impactful projects, work history, and a contact form.

https://sethcram.github.io/

1 stars 0 forks source link

[BUG] Header image keeps getting cut off #1

Closed SethCram closed 1 year ago

SethCram commented 2 years ago

Describe the bug

Header image keeps getting cut off when website is resized

Expected behavior

entire header image should always be fully visible

Desktop (please complete the following information):

OS: Windows
Browser: Chrome

Additional context

doesn't happen anymore in tutorial, but did at the start

Development

[x] nail down when it happens and doesn't happen
- currently not happening on any desktop res
- somewhat on half screen/tablet res
- happens on:
- iPhone SE = 375 x 667
- Samsung Galaxy S8+ = 360 x 740
- Surface Duo = 540 x 720
- Galaxy Fold = 280 x 653
  - also happens at edges here too
- Nest Hub = 1024 x 600
- so, any device with height <= 740 but doesn't happen if height >= 800
[ ] solve horizontal cutoff problem
- from a comment on the video, incr'd phone height from 100 -> 130
- solved horizontal cutoff for every device besides Nest Hub
- only way to solve prob for Nest Hub too is to incr ipad device height to 130
- but then icons aren't visible when first open up page on other ipad sized devices
- happens on ipad air and ipad mini, which are far more popular