Embeds and Responsiveness in 2013

bedoaido · Member · May 20, 2014 at 9:48 am
Copy link

Add topic to favorites
When I embed a Google Map or a YouTube video, my mobile can’t show the videos correctly, and the PC version appears in the middle of the screen, so I should scroll a lot and can’t read anything?

The screen size is 480px on Samsung Galaxy Mini 2, I tested it on my mom’s S3 mini, No problems happened, It may be a missing @media query in 2013.

After revising the style.css on GitHub, It found that the @media queries stop at 359px, My device and middle range devices are mostly ~ 320px, Fix it please :)

The blog I need help with is: (visible only to logged in users)
georgestephanis · Staff · May 20, 2014 at 8:15 pm
Copy link
From my testing with the YouTube Embed at http://twentythirteendemo.wordpress.com/2013/02/11/space-grooves/ — it seems to be behaving all the way down to 320px. For testing, on my computer at least, while Chrome stops shrinking around 385px, Firefox will shrink all the way down to 320.

Can you explain what you’re expecting the video to do apart from shrink width to fit? Some of this may be based on YouTube’s implementation, not ours.
bedoaido · Member · May 21, 2014 at 10:32 am
Copy link
Here is what happened after I embed-ed the video:
On the Samsung Galaxy Mini 2 (320×480):
1- After loading the page: http://imagehosting.biz/images/2014/05/21/SC20140521-131235.png (A white screen with large area to scroll)
2- After scrolling to the right: http://imagehosting.biz/images/2014/05/21/SC20140521-131313.png
3- After zooming out: http://imagehosting.biz/images/2014/05/21/SC20140521-131332.png

On the Samsung Galaxy S3 Mini (480×800): http://imagehosting.biz/images/2014/05/21/Screenshot2014-05-21-13-20-21.png
georgestephanis · Staff · May 21, 2014 at 4:20 pm
Copy link
What URL is this page at, so I can attempt to duplicate?
bedoaido · Member · May 22, 2014 at 10:19 am
Copy link
http://hawlal3alm.com/2014/05/17/microwave/
bedoaido · Member · May 22, 2014 at 11:07 pm
Copy link
Also, Header image does not appear on mobile phones, It is a white space, It appeared before.
thesacredpath · Member · May 23, 2014 at 7:18 pm
Copy link
I’ve tried your site on my iPhone and also on my iPad and the header image shows up just fine. Try going into the settings and clear the history/browser cache and then visit your site and see if the header is there. Also, are you doing it while on wi-fi or direct from your phone’s 4G/3G connection?

What phone and OS version are you using?
bedoaido · Member · May 24, 2014 at 8:34 am
Copy link
It worked :)

I cleaned the cache and Re-Set-ed the header image from customization in wp-admin.

What about the embeds?
kardotim · Member · May 30, 2014 at 5:28 am
Copy link
Sorry for the delay! What OS and browser are you using on your phone?

I’m going to try and see if I can reproduce the video embed issue and will report back to you as soon as possible.

Thanks!
kardotim · Member · Jun 2, 2014 at 10:48 am
Copy link
I can’t seem to reproduce the issue on an Android phone. I do see that the max width is set to a 100% in the CSS, which means the rest of the resizing comes from embed itself.

If you want us to do further testing then please answer the questions from my previous reply and also test to see if you can reproduce the issue elsewhere (like an embedded Youtube video on a non WordPress site)
designsimply · Member · Jun 23, 2014 at 6:49 pm
Copy link
I tested http://hawlal3alm.com/2014/05/17/microwave/ an emulator for Samsung Gallery S using http://www.browserstack.com/ and the video embed looks correct to me. Here is what I saw ini the test: https://cloudup.com/cACHccMpTXQ

I see that you are currently using the mobile theme, and I think that is a good solution in your case.

No items found.