The Grid – Padding around logos

[mrdplusd]

Hello, I created a logo overview with “The Grid”, see picture. Now I ask myself: How do I get a padding of 1rem around the logos? I played around within the respective skin but wasn’t successful.

Thank you!

[marc_a]

Hi @mrdplusd,

Thanks for reaching out!

I just check all the websites under your account but I couldn’t find the page URL where the logos are located. Would you mind sharing the page URL? It would also be best if you could share with us your admin credential. To do that, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[mrdplusd]

Okay, you find the requested information in the secure note.

[marc_a]

Hi @mrdplusd,

You can adjust the spacing on each our your logos by going to your The Grid plugin and locate the grid tab, then you can see item spacings (gutter) at the bottom.

Hope that helps.

Thank you.

[mrdplusd]

Right! Sorry, I wasn’t clear enough. What I want to accomplish is that each logo is centered in a square field with white background. The space between the logo and the fields edge should be 1 rem.

[marc_a]

Hi @mrdplusd,

I also don’t see an option to adjust the space between the logo and white background in the Grid Editor. With that said, we need to do it via CSS, please add the code in your Pro > Theme Options > CSS .

#grid-1512 .tg-logo-grid .tg-item-media-holder .tg-item-media-inner {
  padding: 1rem;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[mrdplusd]

Hello Marc! Thank you, the code works almost perfectly. Unfortunately, I now have the phenomenon that some logos are being displayed stretched or compressed (see picture). I assume that every single logo is affected. Some more, some less. Do you have any idea why this could be?

[marc_a]

Hi @mrdplusd,

The image is like stretched or compressed because the image height was set to 100%, which will adopt the height of the image container. With that said, if the container height is 78px, the image will also adjust to 78px height, resulting in the image being stretched or compressed.

To fix your issue, we need to add the image as a background, but when I check the skin, I don’t see an option to add the image as background in the container. That being said, we don’t have much control over how the element is rendered using the plugin, I suggest that you change that section using the Grid Element and regarding the load more option, this can be done with hide and show. Please check this article how it’s done.

• https://www.w3schools.com/jquery/jquery_hide_show.asp

The reason why I advise you to use the Grid Element is that we are no longer distributing the Grid plugin to the new customer and support for it will end on September 30th. Customers can continue to use the plugin if they wish…it won’t be removed from their site and it won’t break, we simply will not be making updates to it past September 30th nor providing support as part of regular theme support.

Hope that helps.

Thank you.

[mrdplusd]

All right, thanks for the hint! The reason why I use The Grid is that the logo overview does not have to be maintained. A filter is set and the grid only shows media that are categorized as “logo”. If I upload a new logo and categorize it accordingly, it will automatically appear in the logo overview.

Can I also design such an automated scenario with the grid element?

[prakash_s]

Hello @mrdplusd,

You can upload the image in that category it would show automatically. No, it is not possible with only the Gird element, you need to use Looper upon the grid cells to display the image dynamically. In case if you display the image statically then you can use Grid Element.

Thanks