Styling for a logo tile custom module

[Matt1986]

I'm trying to create a custom module to display logos on our partner page. I would like each custom module to be have 25% width and have a display of 'inline-block' to ensure that there are 4 tiles across each row. However i can't seem to reduce the width of the custom module. I have provided a screenshot below of the div/class which is preventing me from doing this (which is a hubspot made div/class). I'm just not sure how to fix the issue using this div/class. I could fix it by targeting each custom module individually however this isn't practical. I'm looking for a global solution, which will make sure every time i add this custom module it will be 25% in width. The page where i'm trying to implement this is http://www-eurobase-com.sandbox.hs-sites.com/our-partners?hs_preview=CYWkVcAE-6002374269 Thanks for any help! kind regards Matt

[tjoyce · Accepted solution]

@Matt1986 - Since you can't traverse up the DOM, you can only traverse down. You would need to drop a little JS into your page to assign a class to the parent of your module. Then, you can use CSS to style it how you like.

$(function(){
    $('.logo-tile-wrapper').parent('div').addClass('logo-tile-super-wrapper');
});

And then add the following CSS

.logo-tile-super-wrapper {
    width: 25%;
    display: inline-block;
    text-align: center;
    float: left;
}

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[Matt1986]

Thank you!!

I've just added the script and its done exactly what i wanted. 

Cheers

[lewisvrobinson]

If your template uses the drag and drop editor, you should be able to create some 25% columns and rows pretty easily that you can pop your modules into.

Alternatively you could create a repeater inside your custom module and handle the layout in there. At the moment, hubspot is wrapping each of your modules in a div which is why they're displaying full-width.

[Matt1986]

Hi Lewis,
Thanks for your reply. I would like to solve this by targeting the HubSpot wrapper that surrounds the custom module. But I can’t seem to identify the class which I need to use to target this.
Can you let me know this class? That issue I’m having at the moment.

Thanks for your help

Regards

Matt