• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Even spacing between home-feature-section and home-feature-1 and hf2

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.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 13, 2013 at 12:35 pm #3158
    dlucca
    Customer

    Wes,

    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 #3161
    dlucca
    Customer

    Wes,

    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 #3162
    Wes
    Moderator

    There 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 #3163
    dlucca
    Customer

    That’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 #3167
    Wes
    Moderator

    1. 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 #3175
    dlucca
    Customer

    Wes, thanks. I’ll try to do this.

    March 14, 2013 at 10:38 pm #3183
    Wes
    Moderator

    Ok, just let me know if you get it working or not.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework