#StackBounty: #html #css #reactjs #iframe Layout Shrinking When The Page Has An Iframe

Bounty: 50

I have a React website (based on Next.js) for which I wrote a React component to embed Tweets. But when a page contains a tweet, the layout shrinks. I have figured out that it happens when there is an iframe on the page as the Twitter API loads an iframe.

I have no clue what is happening and why my viewport settings are not being respected.

Viewport

<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"/>

Ideal Layout

Ideal layout

Shrunken layout (when there is a tweet on the page). Notice the toolbar and text size(s).

Shrunken layout

PS: The same thing happens, if I embed a YouTube video.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.