Custom Module Set up

Regular Contributor

Hello,

 

I need to creat ea custome module but not sure where to start. I have alignment issues on this page: https://app.hubspot.com/design-previewer/4022322/templates/6638628523

It is aligned on the desktop like we want but in mobile there is too much white space between the linkedin link and the titles. I tried many diffrent things but eventually useda. <br> to get the correct spcing on desktop. I have been told from hubspot support a custom module might be the best way to create the spacing for both desktop and mobile. Could anyone help?

Reply
0 Upvotes
13 Replies 13
HubSpot Moderator

@Kgeriak I took a look at your page for you and were you looking to have the LinkedIn icon and the LinkedIn Name be aligned vertically so they are even with eachother or were you referring to the spacing between the Job Title and the LinkedIn link was too much and should be reduced. If you can provide more detail I can hopefully point you in the right direction on how to correct this. 

Reply
0 Upvotes
Regular Contributor

jzilch,

 

Both possibly. I need the linkedin name and logo to be aligned across the page  so they are all on the same line on desktop. Then when we go to mobile we need the linkedin and the title to be tighter on them all so they dont have the large white space between them. If they are all ined up on desktop that is great like i have it curently but when it goes mobile they wrap under each othr and the linkedin logo and name on team member 2 and 5 have too much space between the linkedin and the job title. Hope that is clear. See the spacing on claudio it has too much white space and then look at andy as it is much tighter. Thank youScreen Shot 2018-12-18 at 3.39.33 PM.pngScreen Shot 2018-12-20 at 9.25.53 AM.pngScreen Shot 2018-12-20 at 9.26.08 AM.png

Reply
0 Upvotes
HubSpot Moderator

I took a look at the page for you and tried to figure out a way in which would require the least invasive way to approach this. I would still advise if you have a designer on your team who was setting up this page to look into a longer term solution. 

 

To align the LinkinIn logo and text I would suggest trying to change the vertical-align property on the <td> table cell to text-bottom instead of baseline. That should be a quick fix for the alignment of these two items. 

 

For the larger spaces on mobile this is a trickier issue with a couple of approaches. I would suggest trying to remove the <br> tag since this will still display in mobile and give you the large spaces. You could however add a min-height to the module where the text would be so the LinkedIn name wouldn't be always try to align to the bottom of the container and all the LinkedIn icons would be the a straight line. If you set a min-height of 96px this should better align items to the bottom. There are better solutions involving flex-box and or a match height javascript plugin but these would require additional resources and you would need to hire a third party developer. 

 

I would try and remove the <br> tags and add in the min-height into the module section. 

Regular Contributor

Jzilch,

 

Thank you I will try your recommendations. We are trying not to use a developer and the company who designed and built the site was before me and we are no longer using them. I will try and see what happens. Ill keep you posted. thanks

Reply
0 Upvotes
Regular Contributor

OK I tried what you said maybe i put it in the rong place? I added it in the rich text field code not to a css or antyhing like that. I removed the <br> so no more space and was able to get the text at the bottom but not the image? I still have it in a table so it doesnt wrap and go on 2 lines in mobile. anyw ay I cna get the image to go bottom or sub aligned?

Reply
0 Upvotes
HubSpot Moderator

I do see the code was slightly adjusted but I also do see a height that is being applied to the <td> table cell and has a fixed height and this will keep the height of 48px on mobile too which would add some additional space on mobile. I would recommend to try out a couple of free modules from the HubSpot Marketplace as they seem to fit your needs and you keep you from having to build out this section with header and rich text modules. Hopefully one of these will work for you and I attached a link here. https://app.hubspot.com/marketplace/4022322/products?searchTerm=team+member&subType=CUSTOM_MODULE

Reply
0 Upvotes
Regular Contributor

Jzilch,

 

Unfortunately none of those modules will work with the templaet and the layout. There has to be a way to make the logo line up with the Linkedin text. Because if I can get that work then I can be done with it. It is good on mobile now its just the desk top look i need to get corrected.

Reply
0 Upvotes
Regular Contributor

Anychance you could look at the code and tell me where to put the snippets in html and css and which html nd style sheets. My brain is exploding trying to figure it out. Thanks

Reply
0 Upvotes
HubSpot Moderator

I adjusted some of the code and moved on of the LinkedIn tags inside the first rich text module. I would have a look at the preview and the boxes on desktop should be aligned now for you here. http://www-beqom-com.sandbox.hs-sites.com/total-compensation-management/?hs_preview=YqxjDdjy-6640667.... There might still be a bit more space and that might have to be a compromise based on how this is currently setup. 

Reply
0 Upvotes
Regular Contributor

Jzilch,

 

yes I agree there may have to be a comprimise based on teh structure of the website an the templates. The second team member is missing the logo can you make sure that is there Smiley Happy Other than that it looks good to me but unfortunately i dont have approval. Thank you for your help.

Reply
0 Upvotes
Regular Contributor

it looks like you pushed everythig to the left in mobile now? This is in the sandbox prevew...

Screen Shot 2018-12-27 at 3.13.54 PM.png

Reply
0 Upvotes
HubSpot Moderator

I was able to adjust the table and make their width to be 100% which would correctly align the items in the table

Reply
0 Upvotes
Highlighted
Regular Contributor

Jzilch,

 

You are amazing!! I am looking at it and feel like it is perfect Smiley Happy I will get this to my boss to approve. If i have any questions or follow ups Ill let you know. Thank you very much this has been a major pain.

Reply
0 Upvotes