Blog | Tutorials

My Dropdown Breaks Responsive Web Design!

16/04/2015

An interesting problem I encountered recently was whereby a dropdown on a website we’d built was breaking the responsiveness of the site.

Responsive websites are those that degrade down to any screen-size gracefully. This means that sites, like the Spiral Media one, don’t show a desktop version when you’re on a smaller screen via a mobile phone or tablet.

When a site is mobile responsive it automatically rescales itself without the need of horizontal scrollbars.

The issue I had on this occasion was that a select/dropdown box on a form broke the responsiveness of the site when using an Apple iPhone. Upon selecting it, before I’d even chosen any of the options, the page width went beyond the boundaries of the screen. For a responsive website this is quite an issue.

Dropdown menu

As you can see in the picture above, the edge of the page goes beyond the boundaries of the screen.

I couldn’t recreate this behaviour on any desktop browsers that were resized, and this includes Apple’s Safari – the same browser used on Apple’s iPhones.

The cause of this problem, which I discovered after quite a bit of trial and error, was the iPhone itself.

In order to provide a better user experience, the phone judges the size of the dropdown versus the scale of the site. In my case, it was zooming in automatically when I focused on the dropdown.

The solution was to increase the font size of the text within the select by using a media query.

This meant that the dropdown was seen more favourably by the iPhone, which in turn meant that it didn’t need to zoom in.

I set the text to 18 pixels in this case, though I’d imagine that this might vary depending upon the structure of your page. As it happens I also discovered the reverse problem – if your dropdown is too big then the iPhone zooms you back out.

Dropdown2

This is definitely one of those things that, now that I know, will be easier to build for in the future.

If you want to learn more about responsive web design and how it can work for your website, check out our blog post on Mobile Responsive Design.