SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pulling my hair, two twitter timeline feeds next to each other cant center them.

    Hi all,

    Thanks for reading and appreciate your help.

    I got the following two embbed timelines next to each other.

    HTML Code:
    <a class="twitter-timeline" href="MYTIMELINE1" data-widget-id="435670274034249728">Loading Tweets...</a>
    <a class="twitter-timeline"  href="MYTIMELINE2"  data-widget-id="435706855822614528">Loading Tweets..."</a>
    However. I cant seem to center them on the html page, next to each other with 20 margin in the middle.
    I cant change the class "twitter-timeline" to position them individualy as then the twitterfeeds dont work anymore. Anyone got a clue how to do this? If use below, it aligns right, next to each other but not in middle of the page (as a group)


    Code:
    .twitter-timeline {
    	position: relative; 
    	height: 250px;
    	width: 470px;  
    	background: black; 
    	margin-top: 0px; 
    	margin-left: 20px;
        margin-right: 20px;
    	}

  2. #2
    SitePoint Addict bronze trophy
    Join Date
    Sep 2005
    Posts
    323
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    try adding display: inline-block to the class.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Context matters here (e.g. are these links inside a div or other parent element?), but here's a simple example that incorporate's Patche's suggestion:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    
    	div {text-align: center;}
    	.twitter-timeline {display: inline-block; margin: 0 10px;}
    
    </style>
    </head>
    <body>
    
    <div>
    	<a class="twitter-timeline" href="MYTIMELINE1" data-widget-id="435670274034249728">Loading Tweets...</a>
    	<a class="twitter-timeline" href="MYTIMELINE2" data-widget-id="435706855822614528">Loading Tweets...</a>
    </div>
    
    </body>
    </html>

  4. #4
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Patche View Post
    try adding display: inline-block to the class.
    sweet. appreciate it both.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •