Trust Signals Bar

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;
    }
}

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

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.

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?

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;
}

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

Hi there,

Give this a shot:

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

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

Try this:

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

Cool - and to centre the 'Featured on' above the logos?

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

Perfect thanks guys

No problem :)