2 problems

HTML & CSS
1

Hello,
First issue is that on phone the facebook share button on this page for example:
http://petpal.co.il/article-1
Is going down a line, while on desktop it views normally even when fully zoomed in.

480×800 39.3 KB

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:
http://petpal.co.il/videos

480×800 47.4 KB

Anyone knows how to solve it?

2

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?

3

It tested with LG optimus f3 and galaxy s4.
http://petpal.co.il/article-3

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…

4

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

.fb_iframe_widget{width:auto!important;float:left!important;}

Just throw that in.

5

Done, seems to work

6

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.

7

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

8

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.

9

Done :stuck_out_tongue:

10

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">
11

What meta tag?

12

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">
13

I already got that meta tag

14

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.

15

Thank you, it worked!

16

Awesome! Glad it worked :smiley: .

18

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