Couple of problems with my Random Quote Machine (Solved)

Hey guys, I’ve discovered a couple of problems with my random quote machine project.

http://codepen.io/SW1992/pen/zqdjaa

  1. when it’s viewed on a mobile, in chrome, a sizeable white margin develops at the bottom of the page instead of it being fully covered by the background image.

i’ve tried setting the background on the HTML tag instead of the body and a few other tricks, to no avail.

  1. there is a problem with the quote and tweet buttons shifting from their level positioning when the width is reduced enough in the codepen editor view, at 253px width and downwards this seems to start occuring.

Any thoughts on the cause of either problem would be greatly appreciated.

My observations:

  1. You have center twice in body { background: url..., maybe that is the problem.

  2. #tweet and #newquote have left and right attributes which may be screwing with the position.

Thanks for the reply man!

  1. center center is because i’m horizontally and vertically centering the background. if you specify one keyword, the other value is automatically set to center by default anyway.

  2. think you may be onto something there!. Tell the truth i’ve only actually used relative positioning and left, right properties etc on this project alone and it’s the only one i have this problem with, so i was also thinking a similar thing, that it might be related to that somehow.