- This topic has 13 replies, 4 voices, and was last updated 3 years, 2 months ago by
Leo.
-
AuthorPosts
-
November 29, 2019 at 5:34 am #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
November 29, 2019 at 5:58 am #1082882David
StaffCustomer SupportHi 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/November 29, 2019 at 7:33 am #1083201gedosan
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
November 29, 2019 at 7:59 am #1083254David
StaffCustomer SupportFirst 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/November 29, 2019 at 9:03 am #1083355gedosan
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?
November 29, 2019 at 9:55 am #1083457David
StaffCustomer SupportI 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/November 29, 2019 at 11:32 am #1083597gedosan
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
November 29, 2019 at 7:48 pm #1085186Tom
Lead DeveloperLead DeveloperHi 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-developmentNovember 30, 2019 at 7:55 am #1086431gedosan
Cool thanks it works – how would I centre the logos on mobile?
November 30, 2019 at 8:11 am #1086467Leo
StaffCustomer SupportTry this:
@media (max-width: 768px) { .trust-container { text-align: center; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 30, 2019 at 8:39 am #1086512gedosan
Cool – and to centre the ‘Featured on’ above the logos?
November 30, 2019 at 5:23 pm #1087095Leo
StaffCustomer SupportEdited 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/December 1, 2019 at 3:27 am #1087552gedosan
Perfect thanks guys
December 1, 2019 at 8:40 am #1088048Leo
StaffCustomer SupportNo problem ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.