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

Homepage › Community Forums › Optimal Theme Support › Even spacing between home-feature-section and home-feature-1 and hf2

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.