Mobile and Margin Issue

I have 2 issues I can’t seem to fix…

  1. There is a margin between the playlist and player on my two homepage players here:
    http://www.g1ftedmusic.com/
    I tried fixing it but when I do it automatically applies same style to sidebar players on these pages:
    http://www.g1ftedmusic.com/g1fted-music/

  2. When I look at the website homepage on my phone, the text in the player Top TRacks doesnt scale down like the Top Beats playlist causing the playlist to push outside of the background.

Anyone with CSS skills got any thoughts?

HI,

  1. You seem to have an empty p tag causing the space. Either remove it or try something like this:

.jp-interface + p{margin:0}


The p tags were crazy! I removed the auto p from the themes code. I still have the scaling issue though on my phone. I don’t understand why the one on the right would scale fine but not the left? Did you see what I was talking about?

Unfortunately, I could only test on the mac iphone emulator and it didn’t show the problem you mentioned and I like to see the problem first hand before I start throwing too many suggestions about.

If you can state what type of mobile it was then hopefully someone with the same device can jump in and test.

Its an Android Nexus 4… so no issues on the iphone then,hmmmm

I just checked it with Sauce Labs in Android 4 and Ios 5 and it looks fine…lol. Weird
Thanks Paul

I Just checked in the android emulator and it seems to be ok.

It’s very awkward to check mobile systems across the board as there are so many devices and even many versions of the same device. Unless you can afford to own one of every device then it becomes very awkward to be sure.

Realistically, if you want to support mobile fully you should be using a responsive design and tailor the view to the smaller device but of course that is a major revision of a whole site and not just a simple fix.