[Fixed, ty!] Can't get a content area centered for Tumblr

[Asjure]

Hello all. I know just enough about coding to make me dangerous and not much else. Normally I’m able to muddle my way through, but this is the first time I’ve tried really messing with a theme for Tumblr and I’m especially unfamiliar with it. I’m hoping someone here can point out what’s causing my problem, since I’ve been staring at it for ages and haven’t gotten any closer to solving it.

Here’s an example page: http://xaishi-test.tumblr.com/test

By default, the theme’s content area is way too narrow for my liking (400px) so I changed it to 600. Problem is, it’s still aligned on the page according to its previous width. At 400px it was centered in the screen but now that it’s wider, it’s off-center. So I figured okay, since the code doesn’t need to be pretty and I just want it to work, maybe inserting a “left: -x%;” or “left: -x px;” would fix it. It did, for about a second, and then it slid back into place. No matter how I try inserting and changing “position: etc;” or “left: etc;”, the content area goes back to the original position.

Since the code is meant for Tumblr, CodePen seems to just make a mess of it in the preview window, but here it is: http://codepen.io/anon/pen/MydeNQ?editors=1000#anon-login Hopefully I did that right. Hadn’t heard of the site before coming here.

Line 155 (begins with “#contain”) is where the code for adjusting the container width is and where I’ve been trying to move it around. I thought maybe the codes about “webkit-transition” and “moz-transition” and so on were related to my problem, so I removed them to see if anything changed. All that did was make the content area pop back into its old place instead of sliding to it, which figures, since it’s apparently just a transition effect. Obviously, something else is telling it to its old placement and I have no idea what or where it is.

Can anyone help?

[MrChristofferson]

Your parent container width needs to match the child fixed width that you want centered. Increase the width of the container with the class “main masonry” and watch your content become centered :)

[I.m.learning]

First off, you have 2 doctype declarations.
2- you need to use an encoding standard

<meta charset="utf-8">

You no longer have to use Chrome-1 in your http-equiv; use:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

I am not familiar with Tumblr, but never seen anyone use a prefix in their head tag; I don’t know if this is an issue, someone else might know more.

I see this style tag has no semi colons, seems not to make any difference though; even when changing position types.

<style>figure{margin:0}.tmblr-iframe{position:absolut}.tmblr-iframe.hide{display:none}</style>

However, those aren’t your issues. When changing something, and it doesn’t work, use “!important.” If that still doesn’t make the change, it’s something else.

I changed you body tag style, under the html tag style.

body { color:#fcebd5; font:14px calibri; line-height:17px; margin-right:200px; padding:0; }

This works, for the most part; but the responsiveness needs tweaking. It should minimize sooner than it does. This is the best I can do for you. Just change your margin, in your body. To move it to the left , use margin:right.

Sorry, that makes it look bad when minimizing. I’m going to leave this here to give you an idea what else to change. One thing you can do is use other options; I have a full-width table with different formatting for larger screens that collapse into a list menu using @media.

If thinking about this, I used:

/* when reaching to tablet size, change to:*/
@media screen and (max-width: 990px) {add your formatting in here}

[Asjure]

Oh wow the solution to that was so simple. Thanks a ton for the replies guys!

[Author]

Posts