• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Quite Urgent – Need help with centering content

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Quite Urgent – Need help with centering content

This topic is: resolved

Tagged: Columns, content width, parallax-pro

  • This topic has 9 replies, 2 voices, and was last updated 11 years, 2 months ago by LaunchPad777.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 25, 2014 at 8:19 am #92299
    LaunchPad777
    Member

    Hello all,

    Busy working on client site using Parallax Pro....

    Don't think I can use Content Column Classes to achieve this because the column size options don't provide me with enough space for the content....http://my.studiopress.com/tutorials/content-column-classes/

    Let me explain, if I use the 3 column option, it provides 3 equally spaced columns, this doesn't provide enough width in the middle column. I need the outside columns to be "empty" - purely to re-create the look that the designed has specified.
    See screencast http://screencast.com/t/4sSfwXRoZs3

    1. Is there a way of creating non-standard columns i.e. 20% 60% 20% ?
    - when I say that, I mean easy to create and use in the same way that you use the standard ones!

    2. Is there another effective way to center and restrict the width of the content inside of a widget?

    Your help is appreciated...
    Regards
    Greg

    http://www.test.gregcooksley.com
    February 25, 2014 at 11:23 am #92319
    Peter
    Member

    Will there be content in those empty columns? Or are you using those empty columns to center your content? If the latter case then don't make empty columns, better to give your content a width, and then use margin auto to center it. For example...

    .yourcontent {
        width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
    February 25, 2014 at 11:37 am #92321
    Peter
    Member

    or just give it padding: 250px; or something instead of margin auto.

    February 25, 2014 at 2:02 pm #92339
    LaunchPad777
    Member

    Hi Peter,

    Yes, the idea was to use empty columns to force the width of the content to be restricted.....

    In your example above, if the content is in a widget - do you target the widget?

    Regards
    Greg

    February 25, 2014 at 2:22 pm #92342
    Peter
    Member

    Without seeing your HTML, I can't say for sure. But from your description, you should apply the style to the widget's container (and not the widgets inside the widget container)

    However, since your intention is simply to create white-space around your content, I recommend you instead to use padding on the container of your content. For example if your html looked like this:

    <body>
      <div class="wrap">
        <div class="widget-area">
          <div class="widget">
            <p>some content</p>
          </div>
        </div>
      </div>
    </body>

    then you would add padding to the .wrap { padding-left: 200px; padding-right:200; } Again, I'd need to know the exact html to give a definitive answer.

    February 25, 2014 at 4:40 pm #92355
    LaunchPad777
    Member

    Hi Peter,

    Managed to find this code:
    #black-studio-tinymce-2 .textwidget {
    margin-left: 100px;
    margin-right: 100px;
    }

    It enabled me to insert margins on each side of the content....so far so good.....applying to other widgets.

    Does that look similar to what you were suggesting?
    Regards
    Greg

    February 25, 2014 at 5:41 pm #92367
    Peter
    Member

    Have an example site? But I'll make a guess and assume #black-studio-tinymce-2 is the content's container. If so then

    #black-studio-tinymce-2 {
    padding-left: 100px;
    padding-right: 100px;
    }

    should be all that's needed.

    February 26, 2014 at 3:09 am #92444
    LaunchPad777
    Member

    Hi Peter,

    My apologies... http://www.test.gregcooksley.com

    Is it better to use padding rather than margin?
    Best practice?

    Regards

    Greg

    February 26, 2014 at 2:12 pm #92532
    Peter
    Member

    In this case padding and margin won't make a difference. But best practice would be to use padding here. Padding is generally used when you want to add space inside of an element. Margin is generally used when you want to separate elements on the same level (siblings) from each other.

    Do you only want to pad that section? If so then you're already done. If you want to pad including the title then

    #black-studio-tinymce-2 .widget-wrap {
        padding-left: 200px;
        padding-right: 200px;
    
       /* ...or shorthand, padding: 0 200px; */
    }
    March 2, 2014 at 12:31 pm #93079
    LaunchPad777
    Member

    Thanks for your help Peter...

    Appreciated it.

    Regards

    Greg

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Quite Urgent – Need help with centering content’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble