0

I'm currently developing a testimonials page for somebody, but I'm having a problem. There's one testimonial that's far longer than the rest and it's changing the height of the row, which affects how the ones beneath it display.

I would like all of the testimonials touching eachother (The person i'm making this for said to try and make some thing like this: https://www.phocassoftware.com/testimonials)

Any help would be appreciated, here's my code so far,

<div class="testimonial-blocks">
    <div class="1-testimonial tblock">
        <p>"Example Short Testimonial 1"</p>
        <p><strong> - Example person</strong></p>
    </div>

    <div class="2-testimonial tblock">
        <p>"Example Medium Testimonial 1 Example Medium Testimonial 1 Example Medium             Testimonial 1 Example Medium Testimonial 1"</p>
        <p><strong> - Example person</strong></p>
    </div>

    <div class="3-testimonial tblock">
        <p>"Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 "</p>
        <p><strong> - Example person</strong></p>
    </div>

    <div class="4-testimonial tblock">
        <p>"Example Testimonial 1"</p>
        <p><strong> - Example person</strong></p>
    </div>

    <div class="5-testimonial tblock">
        <p>"Example Testimonial 1"</p>
        <p><strong> - Example person</strong></p>
    </div>

    <div class="6-testimonial tblock">
        <p>"Example Testimonial 1"</p>
        <p><strong> - Example person</strong></p>
    </div>

    <div class="7-testimonial tblock">
        <p>"Example Testimonial 1"</p>
        <p><strong> - Example person</strong></p>
    </div>
</div>

Here's the code in a js fiddle https://jsfiddle.net/nd7pwbt9/2/ there you can see the problem of them not touching.

I've not styled everything properly yet obviously, I just want the testimonials in the right place first. Thanks.

  • Ethan
Ethan Strowger
  • 9
  • 2
  • 1
    Cheeky idea.. chrome browser.. inspect the element you're basing your design off, look at it's css, see that margin-bottom... uncheck that... voila.... use the same css code in your design, or at least as a base for your own design – Dale Aug 22 '18 at 10:00
  • That looks like a pinterest grid layour. You have an example for that here: https://bootsnipp.com/snippets/featured/pinterest-like-responsive-grid – Torjescu Sergiu Aug 22 '18 at 10:03

0 Answers0