WordPress.org

Forums

Writr
[resolved] center (11 posts)

  1. delikvens
    Member
    Posted 1 year ago #

    Hi!

    How to center-align theme?
    Thanks!

  2. designsimply
    Member
    Posted 1 year ago #

    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! :)

  3. delikvens
    Member
    Posted 1 year ago #

    Thank

  4. designsimply
    Member
    Posted 1 year ago #

    You're welcome. :)

  5. cath8r
    Member
    Posted 1 year ago #

    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!

  6. cath8r
    Member
    Posted 1 year ago #

    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...

  7. esmi
    Forum Moderator
    Posted 1 year ago #

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

  8. designsimply
    Member
    Posted 1 year ago #

    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 */
    }
  9. delikvens
    Member
    Posted 1 year ago #

    Failed: (Input first exactly where you need it.

  10. 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.

  11. designsimply
    Member
    Posted 10 months ago #

    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;
            }
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic