Sprite issue on mobile

HTML & CSS
1

I made a nice little social bar in the header of a real estate site and I noticed that they all slid to the left and scrunched on top of each other on mobile. I took out some padding and readjusted the margins on the sprite. They no longer collapse but the spacing in between them disappears and they move to the left.
Any advice?
http://willwebberhomes.com/

I also noticed that despite setting a color to the h3, on Ipad the phone number goes to a different color, but its fine on android. Is this a Apple browser thing?

2

Your icons are a bit messed up on desktop for me. Try giving the UL a width.

3

Ok, i added a width of 240px, but didnt change mobile. It looks fine on my Chrome and FF on mac, what browser are you in Ralph?

4

I’m on Chrome, Mac, but it looks OK now. Because your images are positioned absolutely (which I don’t recommend here) the margins on the LIs won’t affect their positioning.

I recommend that you float the LIs left, give them a width and height of 40 px and a left margin. No need for any positioning on the links or images.

5

That did it! Thanks Ralph, I believe my sprite training is now complete…hopefully…lol!

6

Cool, you’re welcome. :slight_smile:

7

just added you on G+ too