Viewing 10 replies - 1 through 10 (of 10 total)
  • 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! ??

    Thread Starter delikvens

    (@delikvens)

    Thank

    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…

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

    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 */
    }
    Thread Starter delikvens

    (@delikvens)

    Failed: (Input first exactly where you need it.

    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.

    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 ‘center’ is closed to new replies.