Better mobile support

[ogallagher]

I’ve not really been testing the site as much on mobile screens as I’ve been developing it, and now there are a number of issues that make the site much worse on those devices. Here are some things the site could change for better mobile support (at least for mobile Safari, I don’t have access to other mobile browsers yet):

• [x] Some of the pages appear to have negative margins, or content that extends slightly beyond the width of the screen
• [x] account page: the contributed work cards and delete and load more buttons at the bottom of the page all extend left beyond the edge of the viewport. The page width also seems a few pixels too wide.
• [x] home page: the puzzle help modal cannot be exited
• [x] textile page: the scroll lock is not working (permits scrolling and opens the bottom action bar) and the puzzle help modal cannot be exited
• [x] contribute page: everything below the title banner has a bar of white space on the far right, the banner itself doesn’t have enough left side padding, and the credit options radio buttons are squashed
• [x] gallery page: it appears the whole page body has a slight right margin or something that extends beyond the right edge of the viewport

[ogallagher]

The gallery page extra width disappears when there are some search results.

[ogallagher]

The help modal now has a close button.

[ogallagher]

It appears the source of all the pages allowing slight horizontal scrolling was the footer, which was overriding the default horizontal padding for .container-fluid. Now all pages seem to be the correct width so far.

[ogallagher]

The contribute page credit radio buttons are now better spaced.

[ogallagher]

Scroll lock on mobile Safari now works by adding in $('body').css('overflow','hidden').