I have an issue my client has pointed out that I need to try to fix. They are using HP laptops that have screen scaling set to 150%, which is recommended (this is straight out of the box). From what I understand, this is common with small screens with high pixel density.
The issue is that my website breaks when this happens, especially the nav bar and items I have set to absolute over 100dvh divs. Read-only link here:
Is there any way around this? I’m still learning about web building, so my knowledge is limited, but I’ve seen something about media queries that might resolve this issue.
Any help would be appreciated, and if you need any more info, let me know.
These are tough situations with clients. We ended up building this into our contracts… that custom zoomed layouts are an additional cost. We do ensure that content is viewable but the display itself cannot be guaranteed. With that said, you have content that is not viewable, and specifically the main navigation.
You can do a number of different things. Here are a few:
• First establish with the client that this parameter will result in possible limitations in the “actual size” views.
• You can disable the fixed property on the nav so that the menu can be viewed when scrolling the page. The downside is that the nav will move out of view vs. being visible lower on the page. If needed, you can have alternative nav element that scrolls the user back to the top.
• You can work with a min height size that keeps the nav links in view when zoomed. You’d need to publish, view the zoomed layout, then jump back into the designer to make adjustments and then recheck. The downside is that the nav links will appear rather small in the “Actual view” size.
• You can make the nav fit in a more horizontal orientation by changing the nav menu’s width + flex wrap. Change the nav links to inline-flex.
Thank you, I very much appreciate your input. I’ll speak to the client and suggest a change to the menu. I also like the idea of adding this to my contract; custom zoomed pages are a pain!
