Portrait Orientation
embedded components load at 240px
Landscape Orientation
embedded components load at 380px
If changing orientation while page is active, flex sections become malformed.
How to force reload embed component to resize itself?
For here’s a perfect example:
My facebook page custom embed works on all devices when NOT changing orientation after the page is loaded:
` '<'div
class=“fb-page”
data-href=“Facebook”
data-tabs=“timeline”
data-width=“500”
data-small-header=“true”
data-adapt-container-width=“true”
data-hide-cover=“true”
data-show-facepile=“false”>
‘<‘blockquote cite=“Facebook” class=“fb-xfbml-parse-ignore”>
FACEBOOK
</div’>’
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=812293945644508&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>`
When changing orientation while page is loaded facebook malforms flexbox/ too skinny or too thick.