Lately I’ve run into a problem where a tool I’m using has a lightbox that’s cut off at the bottom of the screen.
This generally happens because I have my browser at half-height, or because I’ve pressed the ‘increase font’ keys to make a site 110% text for readability (WordPress P2, I’m looking at you). Here’s what life can look like for me:
This image shows a lightbox cut off midway. The bottom of the picture shows the bottom edge of my browser. Obviously I could make my browser window larger, and most of the time this is what I do. But should I have to? There are situations where I can’t do that, like on mobile. Whomever decided that overlays on mobile was a good idea needs to have their favorite sweaters eaten by moths.
Make your screen scrollable. Make sure your lightbox doesn’t get totally jacked up when a screen is ‘too small.’ A major part of responsive design is not just making sure your site works on mobile devices and ‘full blown’ computers, but that it works on all sizes of monitors when a browser isn’t maxed out.
Here’s another example:
In that image I have what I can only presume is an advertisment that wants me to click something. It’s not until I change my zoom to 75% that I can see this is an ad for Dropbox Business:
Oh and Dropbox was totally unhelpful when I reported these things, which is why they’re getting shamed. They said to fix my screensize.
When a similar issue happened with Slack, I got an apology and a promise to address it. Which they did within a week.