I’m using float: left; margin-left: -100px; for my previous button, and float: right; margin-right: -100px; for my ‘next’ button. While this works perfectly on my fixed-width website for regular browsers, I’m running into trouble with the mobile display.
It appears mobile phones “scale” websites by taking the largest container and adding a little padding, and unfortunately my ‘next’ and ‘previous’ button don’t appear to register, causing them to be cut in half at the edges of the screen on the mobile browser.
Does anyone have a fix for this?
Difficult to suggest a specific remedy without seeing all the code, but I suspect you could get some mileage out of the viewport meta tag:
<meta name="viewport" width="device-width">See A pixel is not a pixel is not a pixel from PPK