Search code examples
htmlcsstumblrtumblr-themes

positioning tumblr posts (centered by default)?


So this is my tumblr page, and i'm having trouble moving the posts from the center of the page to the right of the page... give me a nudge or something.

screenshot showing it


Solution

  • First, I would find the containers you want to style using the "inspector" tools. Whilst in the inspector tool within your browser, I'd suggest playing around with how things look to assess how you want your site to look.

    When you say you want your posts on the right, instead of the center, you can do this in the following ways:

    Selecting the parent container of your posts (<article>), you could do apply the following styling:

    #content {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    

    This will move the entire div#content to the right. You can then position it as you want with margins and padding.

    If you want to move individual posts (<article>) within your div#content, you could remove align-items: flex-end; from div#content, then use the article:nth-child() selector to target specific posts. If you wanted to move them to the right, you could then add align-self to them as so:

    #content article:nth-child(2) {
      align-self: flex-end;
    }
    

    You could also use float, but remember this removes the elements out of the normal flow of the DOM and could affect how your site looks if you are not experienced with styling elements like this. This is the same with using position.