maxogden/javascript-for-cats — pull request #17 by nrrrdcore (2012-12-26 10:29:00+00:00)
Title: Mobile Visual Fixes

Hi @maxogden! I tripped over to jsforcats on my iPhone and noticed some things that were fast and easy CSS fixes on mobile.

Image width/overflow fix: set image width to 100% on mobile. Because the container has an overflow attribute it was cutting screenshots in half and we were missing some catz :frowning:

![](http://cl.ly/Lntm/Screen%20Shot%202012-12-26%20at%202.05.15%20AM.png)

![](http://cl.ly/LoDr/Screen%20Shot%202012-12-26%20at%202.05.52%20AM.png)
![](http://cl.ly/LokH/Screen%20Shot%202012-12-26%20at%202.25.17%20AM.png)

The top header font size was giant so I bumped the font-size down for mobile and centered the text to give it that title feel.

![](http://cl.ly/LoQN/Screen%20Shot%202012-12-26%20at%202.05.33%20AM.png)
![](http://cl.ly/LoNJ/Screen%20Shot%202012-12-26%20at%202.26.38%20AM.png)

Background attribute: As far as I know It's less taxing on css performance to tell the browser what you mean. Background: #fff; tells the browser to repeat paint 1px of #fff across an area as if it were an image and not a solid color. Instead just tell it Background-color: #fff; Fixed some consistency with white/#fff too!

Also just cleaned up some css and fixed some redundancies. Should make it easier for other CSSers to hop in when needed. Hooray! :sparkling_heart: