Until my friend showed me these screenshots:
1st) mac desktop with safari browser zoomed in - there is an horizontal scrollbar as you can see, it shouldn’t happend.
2nd) iOS with safari browser - don’t know excactly how to explain it, that spacing to the right shouldn’t appear.
Where did I go wrong? with my windows 8.1 chrome and IE11 tested works just fine, also on samsung galaxy S4 works fine tested with chrome and that default browser.
Site url: http://test.petpal.co.il
Have you tried the site in Firefox? On my desktop, the menu items are all images of the dog house and do not animate. FF does not recognize background-position-x and background-position-y.
Wow, didn’t expect that from FF, even IE8 knows these properties.
Fixed that, thanks 
Hi,
There are about 3 reasons why there is a gap and are contained in your header and footer elements. You have fixed with elements in your header of 346px and that means the page cannot scale down to fit on a 320px viewport so teh viepwort gets stretched and other elements remain their original size hence the gap. Always allow all elements to scale under 320px at least.
In your footer your fb-like is also set to 335px and will trigger the scrollbar and stretch the viewport also.
In your header you should use a real image for the logo and sets its width to 100% and its height to auto. Then just set the anchor to a max-width that matches the logos original width and in that way the logo will scale smaller once its max-width is achieved and will not cause a scrollbar.
Ok, I don’t have a way to test this right now, but I have changed the following stuff:
Now a question, when I had the title as a background-image I could add text inside the h1 tag to for SEO purposes, it had text-indent -9999px, it doesnt work when I add a real image, what do you think? is it needed? and if yes how do you suggest adding it?
FF is not “wrong”. Those properties were introduced by IE. Chrome (webkit) adopted them but “standards compliant” FF did not. They are non-standard.
The text-indent is for accessibility. Users will be able to get the text if CSS is off and images is off. Otherwise the users get rewarded with a pretty image.
Thanks for the answer Ryan,
Now I searched around abit for responsive like button, I found this:
http://stackoverflow.com/questions/20446818/facebook-like-button-responsive-width
Tried the CSS approach, but it doesn’t seem to work, it doesn’t look like my rules are even getting applied, any ideas about that?
Edit: solved it, text gets cut in the like-box when width gets really small but no other solution as far as I see.
Some screen readers may not read text that is indented and text-indent used like that is bad for accessibility because without css or without images the viewer gets absolutely nothing. If you must use image replacement then use the Gilder Levin method (google it).
However to answer your question the image is important content (otherwise why would you supply text for it) then you will get better seo from having the alt attribute of the image explaining what the image is. If an image is content it should be in the html and a company name or logo will have the name in the alt attribute which will convey what the image is to search engines and assisted devices and is the most accessible method.
It is also the easiest way to scale an image to fit as images always keep their aspect ration when one dimension is set to auto.
