Trust Signals Bar

[gedosan]

Hi Guys

I did have a look about to see if this had already been addressed, but couldn’t see anything (so you know I at least check!)

I’m looking for a simple trust signals (aka logo) bar. Something like you see here (see below)…

– centred on the page with anywhere from 4 to 8 logos (should resize accordingly)
– space for ‘trusted by’ copy to the left
– works on mobile of course 🙂

Cheers

[David]

Hi there,

would require some HTML like this:

<div class="trust-container">
    <div class="trust-inner-container grid-container">
        <span class="trust-label">Trusted by:</span>
        <div class="trust-logos">
            <img src="url_to_image/image.jpg">
            <img src="url_to_image/image.jpg">
            <img src="url_to_image/image.jpg">
            <img src="url_to_image/image.jpg">
            <img src="url_to_image/image.jpg">
        </div>
    </div>
</div>

And then some CSS to style it like this:

/* General styling of container */
.trust-container {
    padding: 20px;
    box-sizing: border-box;
    background-color: #ddd;
}

/* set row layout on larger devices */
@media (min-width: 769px) {

    .trust-inner-container,
    .trust-logos {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }

    .trust-label {
        flex: 1 0 auto;
        margin-right: 20px;
    }

    .trust-logos img {
        flex: 1 0;
        max-width: 100px;
    }
}
/* Force logos below label on medium size devices */
@media (max-width: 1024px) and (min-width: 600px) {
    .trust-inner-container {
        flex-wrap: wrap;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

Cool. Just updated the original ticket with my URL to see it on the page (scroll to bottom of page please)
– I’ve set the to full width in the element, but now the ‘Featured on’ phrase is shunted over to the left. How do I line up with ‘Popular Posts’?
– There’s a random 100px or so gap at the right. No idea what that is?!

Cheers

[David]

First thing is to add the grid-container class to this part of the HTML:

<div class="trust-inner-container"> becomes <div class="trust-inner-container grid-container">

Then give the Section a CSS class of no-padding and add this CSS:

.no-padding .generate-sections-inside-container {
    padding-left: 0;
    padding-right: 0;
}

This will remove the gap to the right hand side. You can also zero out the top/bottom padding in the section if you wish.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

Hmm, bit confused. So I change the div to div class=”trust-inner-container grid-container” in the html, but where does that CSS go?

[David]

I have updated the HTML here. Do that first.

Then edit the GP section on the settings tab you can add the CSS class no-padding
Then add the CSS in Addtional CSS ( or whether you’re adding the other):

.no-padding .generate-sections-inside-container {
    padding-left: 0;
    padding-right: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

Well, I’ve added it all (take a look) and it’s looking ok, but the logos are very spread out. I’m thinking it would look best if the whole thing (from ‘Featured on’ on the left, to the logo on the right) was centred and the space between the logos be brought down in size. Possible?

Thanks

[Tom]

Hi there,

Give this a shot:

.trust-inner-container.grid-container {
    max-width: 900px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[gedosan]

Cool thanks it works – how would I centre the logos on mobile?

[Leo]

Try this:

@media (max-width: 768px) {
    .trust-container {
        text-align: center;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

Cool – and to centre the ‘Featured on’ above the logos?

[Leo]

Edited the CSS above so it should center everything within the container.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

Perfect thanks guys

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts