[Resolved] Trust Signals Bar

Home Forums Support Trust Signals Bar

  • This topic has 13 replies, 4 voices, and was last updated 10 months ago by Leo.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1082845
    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

    #1082882
    David
    Staff
    Customer Support

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

    #1083254
    David
    Staff
    Customer Support

    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.

    #1083355
    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?

    #1083457
    David
    Staff
    Customer Support

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

    #1085186
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this a shot:

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

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

    #1086467
    Leo
    Staff
    Customer Support

    Try this:

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

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

    #1087095
    Leo
    Staff
    Customer Support

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

    #1087552
    gedosan

    Perfect thanks guys

    #1088048
    Leo
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.