Move tweets to top right instead of bottom of page

  • Unknown's avatar
    cassijordan · Member ·

    how do i move my tweets to the top right instead of bottom of my page?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    I reviewed your account and I found that your blog address is http://cassijordan.wordpress.com/

    In future CSS forum posts, please post a link to your blog or link your username by updating the Website field in your Users → Personal Profile page so there’s some context for your request. CSS is theme specific, so before anyone cane help, they need to know the blog URL or at least the theme name.

    There is not a perfect solution to do what you are asking because the height for the Twitter widget varies and when you move something from one part of the page to another using CSS, you need to use absolute positioning and the surrounding area such as the header will not automatically adjust to fit the widget in side it. You may be able to get around this by making the header area tall enough to fit the all the tweets:

    #container {
	position: relative;
}

.widget_twitter {
	display: block;
	position: absolute;
	top: 70px;
	right: 0;
}

#header {
	text-align: left;
	height: 322px;
}

#site-title {
	font-size: 70px;
}

    Note that if you have shorter tweets, it might look like there is a big empty space below the footer, or if you have longer tweets, the tweets might overlap with the menu area and you would need to adjust the “height” value to something taller.

  • Unknown's avatar
    cassijordan · Member ·

    thank you for this! is there a way i can get it right underneath my profile tabs instead of next to header title cassi jordan?

  • Unknown's avatar
    designsimply · Member ·

    The first two code blocks are doing what is called absolute positioning. That means the content you’re moving is taken out of the normal document flow and laid over the top of the other things. You can adjust the “top” and “right” values to move it around. Try this for example:

    #container {
	position: relative;
}

.widget_twitter {
	display: block;
	position: absolute;
	top: 297px;
	right: 0;
}

    Note that you can use a negative value such as -274px for “right” and that will move the tweets outside of the main content area so it doesn’t overlap with others stuff. Try adjusting the numbers to see where want to fit it in.

    If you want to keep it inside the main content area, then you would have to find the selector for something nearby where you end up placing the tweets and try to give them enough space so that they won’t overlap with the content. Do keep in mind that the tweets box has a variable height and the height for other things on the page are a fixed height. That means that you need to give the tweets enough space so that they’ll always have enough room.

  • The topic ‘Move tweets to top right instead of bottom of page’ is closed to new replies.