Div cutting off in Masonry Style Layout in Webkit Browsers

Bootstrap Studio Help
1

Hi,

I'm trying to use a masonry style layout to create a bunch of testimonials. I've tried two different approaches so far but I'm encountering a problem with each. The first approach has been to use the standard bootstrap 4, card-columns approach and the second a pure CSS approach, though the bootstrap approach seems more stable. (I'm trying to avoid using a jQuery approach here). I'm adding a div to the bottom of each card to create a downward pointing arrow, together with a small photo and accompanying name.

With the straight bootstrap approach, I then offset the photo/name from the bottom of each card using a margin-bottom/margin-left value. Whilst this works (see Version 1 on the web URL below) there are two issues

1) this leaves a large blank space below the text on each card because the photo/name is wrapped in the card div and

2) the offset doesn't work correctly when the viewport is at mobile size (although I could correct it with a media query).

If I place the photo/name outside the card div (Version 2), this removes the white space below the text (which is want I want to achieve), but the issue then is that at the bottom of the screen (see Version 2 on the web URL), the photo/name gets cut in half in some instances when viewed on Webkit browsers, i.e. Chrome and Safari, (though I can't replicate this in the Fiddle. I'm assuming this is a specific Webkit related problem.

This is my code JSFiddle

This is an uploaded example: http://46.32.240.37/bigbluedino.com/

Does anyone know a way to get round this problem?

Many thanks

2

I think this solves your spacing problem with version 1. Worked in Chrome/FF/IE11/Edge and even in responsive mode.

stylesheet.css line 485

.testimonial-photo {
    position: relative;
    width: 220px;
    top: 45px; // <---------------------- changed
    left: -18px;
    float: left;
    /*    border: 2px solid red;*/
    /*    background-color: bisque;*/
    margin-bottom: -125px; // <---------- changed
    /*    padding-bottom: 40rem;*/
}

For version 2 I think this is what worked out best, in additional to above changes....

stylesheet.css line 528

#testimonialsv2 .card {
    position: relative;
    padding: 30px 35px 20px 55px;
    background: #fff;
    margin-bottom: 125px; // <------------- changed
    border-radius: 4px;
    border-width: 0 0 0 4px;
    border-left-color: #9fbe00!important;
    /* background-color: bisque; */
}

stylesheet.css line 553

#testimonialsv2 .testimonial-photo {
    position: relative;
    width: 220px;
    top: -100px; // <---------------------- changed
    left: 42px;
    float: left;
}

Saj

3

Also thought I'd mention that because of the natural behavior of CSS hierarchy you can reduce some of your CSS coding.

stylesheet.css line 553 should look like this

#testimonialsv2 .testimonial-photo {
    top: -100px; // <---------------------- changed
    left: 42px;
}

You only need to specify what is different from your base styling. Similar changes can be made to line 528 based on line 460.

Just a heads up :)

Saj

4

Hi Saj,

Many thanks for looking at this for me... I actually took a slightly different approach in the end, though I guess it's six of one, half a dozen of another. I realised I could stick with version 1 (which avoids anything being cut off) and adjust the padding below the paragraph tag using:

#testimonials .card p {
    margin-bottom: -60px;
}

and then I used a media query for smaller screen sizes:

@media (max-width: 34em) {
    .testimonial-photo {
        margin-top: -75px;
    }

    #testimonials .card p {
        padding-bottom: 70px;
    }
}

perhaps not the most elegant solution but achieves I guess the same thing. Thank you for your solution, I tested it and it seems to work well.

Re your second post, yes, I need to review my css and refine it throughout, thanks for the heads up on that... appreciated.