This is my first question on the forum. I’ve tried to find an answer everywhere but couldn’t find out.
I designed a website with a hero section of 100vh, it looks perfect as it should on my mac, taking up 100% of the view height. But I got complaints from windows users and realized that the recommended and default display resolution settings on windows is 150% (100% being too small for the majority, 1920x1080px display on the one I tested). The problem is, even though let’s say on chrome it is written to be zoomed at 100%, it is therefore in fact zoomed in to 150% and my 100vh doesn’t work anymore, the website looks pretty bad on these screens, that a majority seems to use. Is there a workaround? Have I done something wrong? I guess there must be a way? Most websites look pretty unprofessional zoomed in at 150% when not done purposefully to check something specifically before going back to 100%.
The website is: www.france-tourette.org
And here is the link to the read only: Link to designer
Also, this page: france-tourette with it’s 55vh size is messed up on screens with a display resolution of 150%, definitely not showing 55% of the view width anymore
Thanks a lot in advance for your help. And if you see other improvements in regards to use of responsive ways to help with typography that will be welcome, I mixed a bit of px, vh and % values here and there over the time as I tried to fix things. The whole page got a little complicated over the time. (for ie. If I check the website on chrome at 67% zoom to counteract the 150% display resolution, the fonts look thin compared to what I see on my mac or other devices).
A beautiful day to you all,