Twitter API Question posted in
The official Twitter API documentation can be found here.

Layout Shrinking When The Page Has An Iframe – Twitter API

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.

Tags:

2

Answers


  1. 0

    Without code, my best guess is your HTML or body font-size might be unset. Are you using rem or em? This could be affected by the iframe styles being embedded into your react app if it’s not set properly in your react app styles.

    Login or Signup to reply.
  2. 0

    probably due to the overlapping of the CSS coming from the embedded code, you could debug the CSS using the developer’s tools (recommend google’s), and try using !important in the classes to overlap the coming code from the embedded code.

    example:

     .p {
   font-size:16px !important;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search