Community Forums › Forums › Archived Forums › Design Tips and Tricks › Quite Urgent – Need help with centering content
Tagged: Columns, content width, parallax-pro
- This topic has 9 replies, 2 voices, and was last updated 9 years, 3 months ago by
LaunchPad777.
-
AuthorPosts
-
February 25, 2014 at 8:19 am #92299
LaunchPad777
MemberHello 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/4sSfwXRoZs31. 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...
http://www.test.gregcooksley.com
Regards
GregFebruary 25, 2014 at 11:23 am #92319Peter
MemberWill 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 #92321Peter
Memberor just give it padding: 250px; or something instead of margin auto.
February 25, 2014 at 2:02 pm #92339LaunchPad777
MemberHi 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
GregFebruary 25, 2014 at 2:22 pm #92342Peter
MemberWithout 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 #92355LaunchPad777
MemberHi 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
GregFebruary 25, 2014 at 5:41 pm #92367Peter
MemberHave 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 #92444LaunchPad777
MemberHi 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 #92532Peter
MemberIn 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 #93079LaunchPad777
MemberThanks for your help Peter...
Appreciated it.
Regards
Greg
-
AuthorPosts
- The topic ‘Quite Urgent – Need help with centering content’ is closed to new replies.