For my new project, I decided to use relative units which seemed like a good idea at the time. While working on it, I diligently checked on Chrome emulation to ensure everything looked good on various devices.
After pushing it to Heroku, everything appeared fine on my MacBook. However, when I viewed it on my iPad, I was ready to toss it out the nearest window...
#bannerTop {
position:relative;
text-align: center;
width:100vw;
height:70vh;
min-height: 70vh !important;
max-height:70vh !important;
background-image: asset-url('skycloudsalpha.jpg');
background-repeat: no-repeat;
background-position: 50% 75%;
z-index:-1;
}
I suspect the issue may be related to using VH units. Could there be some other underlying problem causing this discrepancy? Debugging is proving tricky as everything looks fine in the emulator but not on the actual device. I've already spent three hours on this and would greatly appreciate any help.
Thank You!