CODEWITHSUNDEEP
htmlcsstwitter
Horah
Horah

Reputation: 1

Trying to get Twitter Feed in the Exact Middle of the Webpage

I am trying to get my Twitter feed in the exact middle of the webpage, unfortunately I don't know why but it is sticking to the top of the Webpage.

Someone help me with this?

The Problem is located on: http://www.falconesports.club/news.html

CSS:

.twitter-timeline {    
 position: fixed;
 margin-top: 50%;
 margin-left: 50%;
 margin-right: 50%;
}

Upvotes: 0

Views: 125

Answers (2)

Undecided Dev
Undecided Dev

Reputation: 830

Here is the code for making your twitter feed at center. But first you need to override the style of your iframe. Since its position value is static having some conflict with your style.

position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

See this image

Upvotes: 0

tenn1440
tenn1440

Reputation: 41

There are a bunch of ways you could accomplish this but my favorite is to use flexbox because it will not only center it horizontally but also vertically.

Here is a good tutorial on flexboxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

In your case to make this work you need to apply these styles to these two classes. 

.fadein.two {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    align-content: center;
}

.twitter-timeline {
    /* position: fixed; */
    /* left: 50%; */
    /* margin-top: 100px; */
    /* margin-left: 600px; */
    margin: auto;
}

Take off all of the margins you have applied to the iframe both inline and via the .twitter-timeline class and also remove the left: 50% and just leave margin: auto.

Upvotes: 1

Related Questions