WordPress.org

Support

Support » Themes and Templates » Writr » [Resolved] center

[Resolved] center

Viewing 10 replies - 1 through 10 (of 10 total)
  • designsimply

    @designsimply

    Member

    There isn’t an option built in to the theme to center the content container in the Writr theme, but you could make some adjustments on your own.

    I can help you get started if that’s something you’d be interested in doing. There are a few different options. One is to use a custom CSS editor plugin and I recommend the one built into the Jetpack plugin. Another option would be to create a child theme.

    Once you’ve set up one of those ways to add your own CSS, you could do something like this:

    body {
            position: relative;
            width: 940px;
            margin: 0 auto;
            padding-top: 0;
    }
    body:after,
    body:before {
            position: absolute;
            height: 100%;
    }
    #page:before {
            position: absolute;
    }
    #page {
            padding-top: 40px;
    }

    It was a bit more tricky to work that out than I thought it would be! 🙂

    Thank

    designsimply

    @designsimply

    Member

    You’re welcome. 🙂

    This works great, but you can’t use the “wider content area” setting…at least I can’t. Doing so makes the columns shorter and chops text off in the main column. BUT, it IS centered which is what I was looking for.

    I came in to thank you for making my day a lot better!

    Actually it’s worse than what I wrote above…it removes the sidebar completely when viewed on an ipad. Just an FYI if nobody has noticed it yet…

    esmi

    @esmi

    Forum Moderator

    If you require assistance then, as per the Forum Welcome, please post your own topic instead of tagging onto someone else’s topic.

    designsimply

    @designsimply

    Member

    Actually it’s worse than what I wrote above…it removes the sidebar completely when viewed on an ipad. Just an FYI if nobody has noticed it yet…

    Good catch! The simplest solution for smaller devices like an iPad might be to update the earlier example to only apply to larger screens. To do that, you could surround the example with a media query like this:

    @media only screen and (max-width: 1060px) {
    	/* example from earlier goes here */
    }

    Failed: (Input first exactly where you need it.

    Moderator Kathryn

    @zoonini

    Automattic Happiness Engineer

    delikvens – did you still need any help with this? I’m not clear what you mean by this:

    Failed: (Input first exactly where you need it.

    designsimply

    @designsimply

    Member

    Here’s a complete edited version with the change recommended before in case it helps:

    @media only screen and (max-width: 1060px) {
            body {
                    position: relative;
                    width: 940px;
                    margin: 0 auto;
                    padding-top: 0;
            }
            body:after,
            body:before {
                    position: absolute;
                    height: 100%;
            }
            #page:before {
                    position: absolute;
            }
            #page {
                    padding-top: 40px;
            }
    }
Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Resolved] center’ is closed to new replies.
Skip to toolbar