You might want to consider moving away from defined pixels and use a more responsive metric like em or rem or %, this way it adjusts to scale with the page on all device types, info on unit types here:

https://www.w3schools.com/CSS/css_units.asp

or at least might want to add some breakpoints to your CSS to change the absolute pixels at like phone/tablet/desktop commonalities, but in today’s world those get VERY hard to define and keep updated.

Going this route will also make the use of min-height and height simultaneously more useful, since right now they will always be the same, but if relative, then the height could be bigger, but never be smaller than your min-height of 50px.

I believe I tried % before and it didn’t work. Any suggestions?