• Resolved adventuresincubing

    (@adventuresincubing)


    First my question and then the long explanation: Is there a way to center all site content within a wide window?

    I know how to do this in a non-responsive theme: Use a wrapper div set to site width (say , 1000px), and apply “margin: 0 auto;” to it.

    I’m having trouble doing that with Simone, presumably because it’s responsive.

    Is there an easy way to “float” the 1200px of site-branding content and content divs in the center of the window while maintaining responsiveness? And, if so, can I still maintain a “full-width” (as in full-window width) navbar so that it stretches edge to edge, into the “margin” on each side of the site content?

Viewing 4 replies - 1 through 4 (of 4 total)
  • I’m not sure I understand what you are describing. The content of the site always floats in the center. The sidebar is deliberately set off to the right to get out of the way. I’m guessing you want the sidebar to stick to the center as well? If so it would require a complete rework of the stylesheets.

    Thread Starter adventuresincubing

    (@adventuresincubing)

    You understood my question, and restated it more clearly than I did: I wanted the sidebar to remain “connected” to the content, and have the content+sidebar center within the window’s width.

    I get the idea of having the sidebar “stick” to the right. It’s unique and clever and I like it. But I also think that on wide windows, the extra whitespace between the centered content and right-floated sidebar is awkward. It’s dead space that could be used for the content.

    I understand that much of this would require substantial retooling; I’ve been styling away, but I don’t feel like hacking up the CSS at a deep structural level.

    One related question: Assuming I keep all other aspects of the overall structure intact, is there a way to have the navigation/menu bar stay aligned with the left side of the centered content block? In other words, I’ve been struggling with that.

    Overall, a really great theme. Very conducive to customization, and very sharp.

    Thanks so much!

    Let me give you an answer that isn’t exactly what you want but will get you where you want to go:

    All this is possible, but it requires substantial retooling of the CSS. I anticipated that people might want to change the alignments of content in the theme and therefore pulled all layout styles into separate stylesheets under the /layouts/ folder. To create new layouts (which is what you want to do) you can simply dequeue the parent theme layout styles and provide your own. I did some rough experimentation on a dev build and was able to lock the sidebar as you describe with some carefully placed changes in the layout styles.

    As for the menu, the easiest thing you can do is set a max-width for the .main-navigation class and set margin: 0 auto; This will place the entire menu area in the center. To prevent it from looking weird you’ll also have to mess around with the header background colour, but that’s trivial.

    If you come up with a smart solution feel free to send a pull request to the Github repo and I might ship it as a theme option in a future version: https://github.com/mor10/simone

    Hello, I need help figuring out how to center the content of my site. I am using theme Micah.

    WordPress.com said I have to check with www.ads-software.com forums for help. I don’t know how to post a new thread and so have to piggyback off of existing threads, but when I did that before the staff member said don’t do that, told me to check on www.ads-software.com and closed the thread. I am hoping someone can help me as I don’t have much experience with CSS and website-making jargon doesn’t make a ton of sense to me.

    As a novice, I hope someone with patience can help me out with the several questions that I have…

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘center site content while maintaining responsiveness’ is closed to new replies.