CMS Development

Matt1986
Participant

Styling for a logo tile custom module

SOLVE
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
1 Accepted solution
tjoyce
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Styling for a logo tile custom module

SOLVE

@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.

View solution in original post

4 Replies 4
tjoyce
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Styling for a logo tile custom module

SOLVE

@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
Participant

Styling for a logo tile custom module

SOLVE

Thank you!!

 

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

 

Cheers

 

 

 

lewisvrobinson
Participant

Styling for a logo tile custom module

SOLVE

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
Participant

Styling for a logo tile custom module

SOLVE
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
0 Upvotes