Home › Community Forums › Optimal Theme Support › Even spacing between home-feature-section and home-feature-1 and hf2
- This topic has 6 replies, 2 voices, and was last updated 9 years, 10 months ago by
Wes.
-
AuthorPosts
-
March 13, 2013 at 12:35 pm #3158
dlucca
CustomerWes,
I’ve tried about every combination I can to get the three images mentioned in the title to space themselves equally – appearing as if they are just three equal home features. No avail. You made some suggestions, but my implementation doesn’t seem to have the result you expected.
I’m posting the section in the css and perhaps you can look at it and tell me what to adjust, specifically?
Thanks in advance. I’ve already spent too many hours on this minor aspect 🙁
Dave
/* Home Feature Section
———————————————————— */.home-feature-wrap {
clear:both;
overflow: hidden;
padding: 20px 0;
width: 960px;
text-shadow: 1px 1px #FFFFFF;
}.home-feature-sidebar {
font-size: 14px;
float: left;
line-height: 22px;
margin: 10;
padding-right: 0px;
width: 300px;
}.home-feature-sidebar h4 {
color: #333;
font-family: ‘Oswald’,arial,sans-serif;
font-size: 28px;
font-weight: normal;
line-height: 34px;
text-transform: none;}
.home-feature-sidebar p {
margin: 0 0 30 px;
}.home-feature-section {
background: repeat-y scroll left center transparent;
float: right;
font-size: 14px;
line-height: 22px;
padding-left: 0px;
//width: 680px;
text-shadow: 1px 1px #FFFFFF;
}.home-feature-section p {
margin: 0 0 0px;
}.home-feature-1 {
float: left;
margin: 0 0px 30 px;
width: 300px;
}.home-feature-2 {
float: right;
margin: 30;
width: 300px;
}.home-feature-1 h4,
.home-feature-2 h4 {
color: #333333;
font-family: “Helvetica Neue”, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
margin: 0 0 0px;
padding: 30;
}.home-feature-1 .widget,
.home-feature-2 .widget {
margin: 0 0 20px;
}March 13, 2013 at 1:16 pm #3161dlucca
CustomerWes,
Let me clarify this. After fooling around with these settings, I have the images lined up ok. I do have two other things I’d like to accomplish…
1. The text area under the image should be more contained and less stretched out. Is there a setting that can confine it to a width narrower than the entire width between sections?
2. The images themselves… is it possible to center the image, as opposed to them all lined up on the left side?
Thanks!
Dave
March 13, 2013 at 1:25 pm #3162Wes
ModeratorThere are errors in your code that need to be fixed. Anytime you add a margin you need to add the “px” after the number unless the number is 0.
Here is the proper way to do it –
.home-feature-sidebar {
font-size: 12px;
float: left;
line-height: 22px;
margin: 0 30px 0 0;
width: 300px;
}.home-feature-1 {
float: left;
margin: 0 30px 0 0;
width: 300px;
}.home-feature-2 {
float: right;
width: 300px;
}So just replace the home-feature-sidebar, home-feature-1, and home-feature-2 with the above and it should be even.
March 13, 2013 at 2:18 pm #3163dlucca
CustomerThat’s great!
Any thoughts in the second part of my post – image centering and confining text description area?
I appreciate your help!
D
March 13, 2013 at 10:25 pm #3167Wes
Moderator1. You can add padding to the left and right.
2. You can add text-align: center; to the image class…..or you could just increase the image size to fit within that space.
March 14, 2013 at 11:01 am #3175dlucca
CustomerWes, thanks. I’ll try to do this.
March 14, 2013 at 10:38 pm #3183Wes
ModeratorOk, just let me know if you get it working or not.
-
AuthorPosts
- You must be logged in to reply to this topic.