search

NMoore-STEM / ASC-LLC-Redesign

Ananda Science Consulting webpage redesign
https://anandascience.com/
0 stars 0 forks source link

NM Portfolio - Modal height issue #599

Closed NMoore-STEM closed 1 year ago

NMoore-STEM commented 1 year ago

This commit includes fixes for all resolutions on the NM Portfolio modals.

Initially, I thought that unique relative units such as svh, dvh, etc. would provide better results for modals (mainly in mobile resolutions) rather than just using vh. This approach did not work as expected when tested on mobile devices. Brave browser caused the most issues with what was interpreted as height for modal scroll area as it has additional menus that take up vertical space.

Next, I tried to graph a negative correlation curve within the bounds of min and max heights deisred for modal then code the corresponding functions/ calculations into the script. This did achieve what I was looking for, but I felt this solution was over-engineered. Once testing was done on the scripted padding approach, it did not behave exactly as intended.

The final approach, which is included here, was to just "hard-code" a value for padding-bottom. In some browsers, there will be a slight excess in length of the content within modals. For browsers (and smaller devices) that cut off the bottom of the modals, this additional padding should bring the last elements well into view.

More testing needs to be done concerning the new changes.

NMoore-STEM commented 1 year ago

After testing, the set padding helped keep content in viewport, but parent containers had to be fine-tuned for height. The only remaining browser and device that had difficulty displaying modals was Samsung Galaxy J3e running Firefox v82.1.1.

NMoore-STEM commented 1 year ago

Updated previously mentioned device browser to firefox v 113 and the problem was resolved.

NMoore-STEM commented 1 year ago

Was also tested on Motorola MotoG Power running Chrome. This issue has been resolved with this commit.