Photoshop Question posted in
The official user guide can be found here.

Place button after text on same height – Photoshop

I’m currently working on a website for a client, and now I’m making an plan section with different versions of the product. The problem is that I don’t know how to place all the buttons 40px below the column with the biggest text in a responsive way (without position:absolute, with hidden lines of text or with margins with line-heights etc.).

Here an image from Photoshop (how I want it to be)

And an image of how it actually is in my code (the problem)

I hope you guys understand what I’m trying to say and that you can help me! I think it’s in this case not necessary to add my code, but if I’m wrong please tell me 😉 I’m very curious how you guys fix this!

Frederick

Tags:

3

Answers


  1. 0

    You are facing this problem as the height automatically adjust itself.
    To solve this problem put each content inside div tag and then adjust individual margin-bottom.

    Login or Signup to reply.
  2. 0

    I use Zurb Foundation “Equalizer” for this sometimes, but there is another way to do it as shown below.

    HTML

    Wrap the “features” text in a div container and the “ecommerce” elements in another div container.

    <div class="row">
  <div class="medium-12 columns small-text-center">
    <h1>Uitvoeringen</h1>
  </div>
</div>
<div class="row">
  <div class="medium-3 columns">
    <div class="product">
      <div class="features">
        <h4>Finish:</h4>
        <p>Solid gold plating</p>
        <h4>Materials:</h4>
        <p>High grade steel
        </p>
      </div>
      <div class="ecommerce">
        <button>Buy now</button>
        <p>Price per item</p>
        <p>Minimum order size 100 pieces</p>
      </div>
    </div>
  </div>
  <div class="medium-3 columns">
    <div class="product">
      <div class="features">
        <h4>Finish:</h4>
        <p>Solid gold plating</p>
        <h4>Materials:</h4>
        <p>High grade steel
        </p>
      </div>
      <div class="ecommerce">
        <button>Buy now</button>
        <p>Price per item</p>
        <p>Minimum order size 100 pieces</p>
      </div>
    </div>
    </p>
  </div>
  <div class="medium-3 columns">

    <div class="product">
      <div class="features">
        <h4>Finish:</h4>
        <p>Solid gold plating</p>
        <h4>Materials:</h4>
        <p>High grade steel</p>
        <h4>Finish:</h4>
        <p>Solid gold plating</p>
      </div>
      <div class="ecommerce">
        <button>Buy now</button>
        <p>Price per item</p>
        <p>Minimum order size 100 pieces</p>
      </div>
    </div>
    </p>
  </div>
  <div class="medium-3 columns">
    <div class="product">
      <div class="features">
        <h4>Finish:</h4>
        <p>Solid gold plating with silver and platinum edging</p>
        <h4>Materials:</h4>
        <p>High grade steel
        </p>
      </div>
      <div class="ecommerce">
        <button>Buy now</button>
        <p>Price per item</p>
        <p>Minimum order size 100 pieces</p>
      </div>
    </div>

  </div>
</div>

    CSS

    Then add a media query for larger screens (in this case, medium screens and up) with a fixed height for the “features” div container. This will allow the buttons to line up on large screens, and basic stacked blocks on small screens (responsive part): 

    @media only screen and (min-width: 40.063em) {
  .features {
    height: 260px;
  }
}

    Here’s my CodePen example

    Login or Signup to reply.
  3. 0

    You need to declare a min-height in css around the top links.

        .column {
            width: 120px;
            display:block; 
            float: left; 
            margin:20px;
            /*the following is the value you need*/
            min-height:300px;}

    See this link:
    http://codepen.io/artchibald/pen/yJkYLW

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search