What could be the reason for Chrome's failure to display flexbox positioning in an embedded Twitter timeline?

Could someone help explain why Chrome (Version 78.0.3904.97) doesn't adhere to flexbox css rules when trying to center a Twitter timeline on a web page?

I've encountered an issue where attempting to center the Twitter timeline using the code provided by Twitter for embedding it into a webpage is proving difficult in Chrome, while it works perfectly fine in Safari.

Screenshot of Safari displaying the Twitter timeline centered within the twt class div Screenshot of Chrome showing the Twitter timeline left-aligned within the twt class div

/* HTML snippet */

<div class="twt">

   <a class="twitter-timeline" data-width="640" data-height="860" href="https://twitter.com/PremierLake?ref_src=twsrc%5Etfw">Tweets by PremierLake</a> 
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</div>

/* Flexbox CSS */

.twt {
  display: flex; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: stretch;
  width: 100%;
  height: 860px;
}

Notes: I have attempted using non-flexbox traditional positioning methods. I prefer not to use absolute positioning as it would disrupt the flow of surrounding elements on the page. I have searched through Twitter's developer notes but found no solution for centering a timeline. Please note that this is different from centering a single tweet, as the Twitter timeline consists of multiple tweets from a single feed.

javascripthtmlcsstwitterflexbox

Answer №1

After implementing your code, I didn't initially receive a response. However, upon testing it out myself, everything seemed to work perfectly! https://i.sstatic.net/PW70v.jpg

I recommend checking the element in Chrome to view the actual styles that were applied to it.

The only modification I made was highlighting the background in your code snippet. 

<!DOCTYPE html>
<html lang="en>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* flexbox css */

      .twt {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: stretch;
        width: 100%;
        height: 860px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <h1>blalbalbalb</h1>
    <div class="twt">
      <a
        class="twitter-timeline"
        data-width="640"
        data-height="860"
        href="https://twitter.com/PremierLake?ref_src=twsrc%5Etfw"
        >Tweets by PremierLake</a
      >
      <script
        async
        src="https://platform.twitter.com/widgets.js"
        charset="utf-8"
      ></script>
    </div>
  </body>
</html>

]2]2

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the counterpart of `width: max(100%, fit-content)`?

In order for my div to adjust its size based on the content if the parent div is smaller than the content, and match the size of the parent otherwise, I have been trying to achieve the first scenario by using width: fit-content, and the second scenar ...

css

View the text notes information stored in a database, make changes to them, and then update and save the modified data using NodeJs

Currently developing a website that allows users to register, login, write text notes in a text area, save them in a database, and view those saved notes on a separate page. Additionally, users should be able to click on a note from the list and have it ...

htmlmysqlnode.jsexpress

Display AJAX content only after all images have finished loading

As I work on developing my own custom lightbox jQuery plugin, I have encountered a challenge. While everything seems to be functioning correctly, I am facing an issue where I want to hide the loaded content until all images have finished loading in the b ...

javascriptjqueryajaximageload

Error: When attempting to submit to MondoDB, a TypeError occurred stating that property '_id' cannot be created on the number '1'

After retrieving 25 new comments in JSON format from a subreddit, my code converts it to a string, removes special characters, and generates a dictionary to track word frequency. The challenge lies in deciding whether to treat each word as a separate entry ...

javascriptnode.jsmongodbexpressdictionary

The power of the V8 JavaScript engine: Understanding v8::Arguments and the versatility of function

I have created a Node.js addon that wraps a C++ standard library element std::map<T1,T2>. The goal is to expose this map as a module with two primary functions: Set for adding new key-value pairs and Get for retrieving values by key. I want to create ...

javascriptc++node.jsv8embedded-v8

Creating a task management application using AXIOS and VUE for easy data manipulation

I am currently working on a small app to enhance my skills in VUE and Axios. However, I am facing a roadblock when it comes to the update functionality. I am struggling to pass the ID to the form for updating and despite watching numerous tutorial videos ...

javascriptcssvue.jsaxios

Picture to be placed on the right side

Looking at the code below, I have a dropdown list and an image. Currently, the dropdown list and image are positioned very close together, but I would like to create some space between them by moving the image to the right. I tried using the align attribut ...

asp.netcss

If an array is present in the object, retrieve the array item; otherwise, retrieve the field

When obj arrays are nested and found, everything works correctly; however, if they are not found, the page breaks as it becomes null. How can I check if they exist beforehand, and if not, just output the next level field? The code below works when both ar ...

javascriptjqueryarrays

Troubleshooting issue: Next.js Material-ui CSS SSR not functioning properly within components

Upon completing my project, I discovered that SSR for Material-ui is not functioning on the page where I utilized functional components. Here is my _document.js file: [Code from _document.js] Example Page: [Code from E ...

javascriptreactjsmaterial-uinext.jsserver-side-rendering

Is it possible to disable a function by clicking on it?

I currently have a website that is utilizing the following plugin: This plugin enables an image to be zoomed in and out through CSS transforms, with default controls for zooming in and out. My goal is to incorporate a reset button that returns the image ...

javascriptjquerycss

Identify the appearance of a web component being added to the Document Object

After reading this discussion regarding a web-component I created: <my-vue-web-comp [userId]="1" id="my-component"></my-vue-web-comp> The component functions properly in Angular. How can I determine when the web component h ...

javascriptangulartypescriptvue.jsweb-component

Mapping API for JavaScript, converting coordinates into precise locations

I have two coordinates: 54.674705589 and 25.289369548. I want to place these coordinates on a map when the button is clicked, similar to this example. However, the example provided is for addresses, not coordinates. Is it possible to modify this example t ...

javascriptapidictionarygisarcgis

Trying to fill a modal with data from a text input on a website

The JavaScript I have for a popup in asp.net seems to be returning blank variables from text boxes on the web page. It appears like there might be something missing in my document.getElementById function, either it's not being used correctly or I shou ...

javascriptasp.net

When I incorporate the h-100 class, my content expands beyond the container on mobile devices

Struggling with implementing bootstrap 4.0? I'm attempting to utilize h-100 to ensure that the background stretches to the bottom of the user's screen. I've experimented with clearfix, fluid-containers, and more in an effort to make it work ...

htmlcssbootstrap-4containersgrid-layout

Concealing a div based on a condition

Having difficulty concealing a div once a specific condition is met. The condition depends on the user logging into a web application. In my CSS file, I have set the multipleBox div to visibility: hidden, along with other styling attributes like border co ...

javascripthtmlcssajaxjsf

embedding JSON data into the main template

I'm looking to include a JSON string by injecting some JavaScript on each page. In the master page, I have: public partial class TheMasterPage : System.Web.UI.MasterPage { protected void Page_Init(object sender, EventArgs e) { if (Session[ ...

javascriptasp.netjson

When using a for loop in HTML5 Canvas, the result of the toDataURL function will consistently remain

Check out this JSFiddle. The goal is to select images and then encode them in base64 using canvas to store them in sessionStorage for later uploading. However, despite looping through each image, the base64 encoded output remains the same every time. Even ...

javascriptjqueryhtmlcanvasbase64

Activate the DecimalPad Keyboard Type for Mobile Safari Using HTML

Query: Can the keyboard type decimalPad be activated in a HTML form displayed on mobile Safari (i.e. a numeric keyboard with a decimal point)? Note: While a "numeric" keyboard can be achieved by setting <input type="number" pattern="d\*" />, I ...

htmliossafarikeyboard

jQuery Autocomplete without dropdown menu suggestion available

I'm working on a form for my webpage and I want to enhance user experience by adding autocomplete functionality. The goal is to suggest existing names as users type in the 'name' input text box. Although I can see in my console that it&apos ...

jqueryhtmlajaxautocomplete

Utilize JSON data fetched from a URL to dynamically populate an HTML content

There is a JSON file located at a URL that looks like this: [{"tier":"SILVER","leagueName":"Tryndamere's Wizards","queueType":"RANKED_SOLO_5x5","playerOrTeamId":"91248124", "playerOrTeamName":"NunoC99","leaguePoints":18,"wins":411,"losses":430,"rank" ...

javascripthtmljson