Update the design of the about page meet the team section on your Real Geeks website

View fullsize

Before

View fullsize

After

This code below will modernize your Real Geeks about pages agent section. The new grid will enable the agent blocks to resize beautifully on all screen sizes, create a sleek gradient behind the agent name and float their name over their photo, and will even add a “John Doe” profile picture placeholder in case an agent has no photo to upload, which will look much better than the “No photo” verbiage that shows up in the stock design. Install it today to see how it looks on all screen sizes. Make your team look even better than they already do! Enjoy.

This only works for Miranda/Miranda Thin users.

If you already have re-designed your site through our design services, please do not apply this code because your site already has a custom meet the team section. This is only optimized if you have a Real Geeks website that has NOT gone through a massive re-design — so it might not look right if you use it in that case.

---

Instructions

Copy Code

<style>
    .realtor-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        grid-gap: 20px;
        margin-top: 7px !important;
        border-top: solid 1px #e8e8e8;
        position: relative;
        margin: 2px;
        padding-top: 20px;
    }

    .realtor-list:before,
    .realtor-list:after {
        display: none;
    }

    .agent span:before {
        content: '';
        position: absolute;
        width: 100%;
        display: block;
        background: #ff000000;
        bottom: 0;
        height: 33px;
        z-index: -1;
        backdrop-filter: blur(1px);
    }

    .no_agent_photo {
        background-image: url(https://u.realgeeks.media/vanitygeeks/assets/no-photo.jpg) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center !important;
        opacity: .4;
    }

    .agent {
        flex: 0 1 31%;
        padding: 0 !important;
        position: relative;
        min-height: 250px;
        border-radius: 4px;
        max-width: 238px;
        display: flex !important;
        width: auto !important;
        clear: none !important;
        overflow: hidden;
        box-shadow: 0px 5px 6px 0px rgb(0 0 0 / 13%) !important;
        transition: 300ms all;
        border: solid 1px #dbdbdb;
    }

    .agent:hover {
        transform: scale(.98);
        box-shadow: 0px 0px 3px #e0e0e0 !important;
    }

    .agent:hover>a span {
        color: white;
        background: linear-gradient(360deg, rgb(0 0 0 / 57%), transparent, transparent, transparent, transparent, transparent);
        font-weight: 400;
    }

    .agent a {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

    .agent img {
        margin: 0 !important;
        max-width: 100%;
        max-height: 400px;
        object-fit: cover;
        height: 100%;
        width: 100%;
        object-position: top;
    }

    .agent span {
        height: 100%;
        padding: 15px 10px;
        color: white;
        display: flex;
        font-weight: 400;
        text-transform: capitalize;
        position: relative;
        z-index: 2;
        letter-spacing: 1px;
        justify-content: center;
        align-items: end;
        background: linear-gradient(360deg, black, transparent, transparent, transparent, transparent, transparent);
        word-break: break-word !important;
        line-height: 100%;
    }

    @media (min-width:606px) and (max-width:1024px) {
        .agent {
            max-width: 220px !important;
            flex: 0 1 22% !important;
            flex-shrink: 0 !important;
        }
    }

    @media (min-width:325px) and (max-width:606px) {
        .agent {
            flex: 0 1 45% !important;
            max-width: 225px !important;
            max-height: 148px !important;
            min-height: 230px !important;
        }

        .realtor-list {
            justify-content: center
        }
    }

    @media (max-width:325px) {
        .agent {
            flex: 0 1 100% !important;
            max-width: none !important;
        }
    }

</style>

If you ever have questions, please feel free to contact us.