satori83 — 2013-04-14T20:50:45-04:00 — #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.
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?
ralphm — 2013-04-14T21:22:33-04:00 — #2
Your icons are a bit messed up on desktop for me. Try giving the UL a width.
satori83 — 2013-04-14T21:35:34-04:00 — #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?
ralphm — 2013-04-14T22:28:58-04:00 — #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.
satori83 — 2013-04-14T22:53:33-04:00 — #5
That did it! Thanks Ralph, I believe my sprite training is now complete...hopefully..lol!
ralphm — 2013-04-14T22:56:06-04:00 — #6
Cool, you're welcome.
satori83 — 2013-04-14T22:56:46-04:00 — #7