ASC and NM Portfolio - Hero/splash broken design

[NMoore-STEM]

Although vh units were changed to svh, they do not seem to be working. Tested on samsung galaxy s22, s10, J3e, Motorola moto g. At a loss as to how to fix this or if it is even possible to make these sections fully fill first load on a variety of devices. More testing is needed on this.

[NMoore-STEM]

The replacement of "vh" with "svh" did not repair the broken splash design. Next approach, I should consider using height:clamp(...); to control vertical sizing. If clamp does not help, should abandon idea of splash pages fitting viewport and choose an average, or most-likely viewport height based off of mobile resolution, US/North America ownership statistics.

[NMoore-STEM]

After studying this issue, clamp should work. Something to note: there is no need to nest calc(...) in clamp. Clamp allows for nested calculations already so should be typed as: height: clamp(100svh - 60px, 100vh - 60px, 100lvh - 60px)

[NMoore-STEM]

Still need to establish what min, val, max are for each individual element. After reading more on the issue from developer.mozilla.org, they seem to use calc(...) while nested within clamp(...) but also mention that using calc(...) is not necessary for simple calculations (+,-,*,/).

[NMoore-STEM]

Changed all declaration height properties using "svh" (2 total, one for splash, one for modal scroll area) to "dvh". Test these changes at EOD. IF this works, no further action needed for NM Portfolio page concerning this issue and similar changes should be applied to the ASC page. IF this DOES NOT work, consider using height:clamp(...) or height:min(...) etc. instead...

[NMoore-STEM]

Server updated, dvh did not fix the issue. Looked up browser support (on caniuse) and found that support for these relative units had only began around 2022. My browsers may be out of date on the devices I am testing with. Will download more recent apks for browsers on devices or update through built-in utilities.

This brings up a good argument to have a fallback in places for CSS height so the pages do not have design broken. Ideally, will test fallbacks before updating browsers.

[NMoore-STEM]

Next approach: fallback- height:calc(100vh - 100px); new declaration- height:calc(100dvh - 100px); This is not ideal as it deviates from the intended design, but allows for 100px "cushion" for how different mobile browsers might render the splash vertically.

NOTE: this will be implemented first only on NM Portfolio page, so only test this page until confirmed working.

[NMoore-STEM]

Additionally, for the portfolio splash, the top margin on the splash container was reduced to better vertically align. Work is still needed on the ASC splash for mobile.