- This topic has 9 replies, 2 voices, and was last updated 9 years, 3 months ago by
.
-
Posts
-
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/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
GregWill 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; }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
GregWithout 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.
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
GregHave 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.
Hi Peter,
My apologies... http://www.test.gregcooksley.com
Is it better to use padding rather than margin?
Best practice?Regards
Greg
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; */ }
- The topic ‘Quite Urgent – Need help with centering content’ is closed to new replies.