2 problems

First issue is that on phone the facebook share button on this page for example:
Is going down a line, while on desktop it views normally even when fully zoomed in.

Second issue,: on my videos page (tested with LG optimus f3 phone) I see the star images that indicate each video rating very big while in any other phone/desktop i tested it shows normally, this is not really critical as it happends so far only on the phone I stated but if you know a solution feel free to state it :smile:

Anyone knows how to solve it?

First issue - can you put borders around each of those inner elements? .fb-share-button and the text? Wrap that weird language text in a <span> to get the border able to be applied. I just need to see something. I can’t replicate this unless I set a very high font size. To the point the text would be overlapping the FB button. What mobile is this?

It tested with LG optimus f3 and galaxy s4.

Edit: it seems like that fb-share div needs to be wrapped inside another div and need to make that div floated, otherwise on mobile it takes 100% width, for some reason…

Try setting the width to auto. This is only for testing but try adding this. I’m curious.


Just throw that in.

Done, seems to work

I can’t find it, but I’m guessing some Javascript or CSS (facebooks probably?) is setting that to full width / unfloated / something for mobile. I wouldn’t recommend keeping that code in. I’d try and find the source. You know what to look for. It’s your call though. Keeping it in isn’t my recommendation though :smile:

Glad the shot in the dark worked though. I can’t get it to replicate if I make my screen mobile size. So I can’t really test. I have an S5 which exhibited the behavior but testing was impossible.

Got any idea about the second issue? I see this issue on iphone 4 aswell…

I’ll take a look at it now. No promises. But please please get rid of the autostart on the youtube link. That’s just annoying.

Done :stuck_out_tongue:

This is a HUGE shot in the dark because I don’t have testing abilities at hte moment. But I believe you need to add this meta tag. Just throw it in and report back the results. I’d test if I could.

<meta name="viewport" content="width=device-width, initial-scale=1">

What meta tag?

Ah I forgot that Sitepoint allows you to post as raw HTML. I didn’t format it. Silly me.

<meta name="viewport" content="width=device-width, initial-scale=1">

I already got that meta tag

Try this. Again it may not work - just ruling things out. And sorry I missed that meta tag. Coulda swore it wasn’t there. I did look :slight_smile:

The .star{} rule you have. Change it to this

.gallery_box .star{dispay:inline;height:auto;}

Make it more specific (adding .gallery_box) and add in the auto height.

Thank you, it worked!

Awesome! Glad it worked :smiley: .

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.