Logo Carousel

[MMimouni]

Hi all, 

I downloaded the hubspot logo carousel module for website, it works well but I can't find a way to align every logos on the center of the slider, cf screenshot attached

Could you help me on that ? eventually let me know where I could modify the css file, 

Thank's a lot, 

Mehdi

[apoore]

Hi @MMimouni @Anton 

How did you fix this issue? 

[MMimouni]

Hi @Anton 

We're still not able to display our logos correctly, we even try to reshape them smaller before uploading them, once again, they used to appear correctly before the position correction you advised. 

Could you please advise ? 

Thank you in advance for you help, 

Best, 

Mehdi

[MMimouni]

Dear @Anton 

Thank you so much for your help ! It seem to work for the position of the logos. I still have a display issue that didn't occure earlier though. Some of the logos just deasappeared... see the screenshot attached, 

Could you adbvise on that ? 

Thank you, 

Best, 

Mehdi

[Anton]

Hi @MMimouni, 

have you(or somebody else) changed/removed the images from your Hub? Just asking because the CSS changes don't have an impact on the image path(s).

Does this error still appear if you reselect your logos?

best, 

Anton

[MMimouni]

Hi Anton, 

We actually tried to delete all the logos and upload them again, the problem still occures, but the bugs aren't on the same logos... 

[Anton]

Hi @MMimouni,

a few questions:

• do the logos/images have spacings in the name? A spacing will most likely be replaced with "%20" by the browser and this can lead to this error/bug.
• Have you tried to preview the page with the "preview function"(top right corner below the orange update/publish button)? Does this error/bug still apear?
• Could you please provide a preview link?

best, 

Anton

[MMimouni]

Thank you Anton, 

- Yes some of them have spaces in their names, but most of them don't. The bugs occures for either ones with spaces and ones without..

- Yes, sure, we often use the preview function

- Please find a link here: http://25169193.hs-sites-eu1.com/movie?hs_preview=tAPayIXD-44455775933

Thank you for your help, 

Best, 

Mehdi

[Anton]

Hi @MMimouni, 

Just checked it with a few images images with and without spaces like "image name.jpg" and "image-name.jpg" and could reproduce the bug...

Could you please provide a link for somebody who isn't in your Hub?To do so simply click on "copy shareable link" in the preview. Thank you

best, 

Anton

[MMimouni]

So, you recommand that we simply rename the files ? Once again, some files without spaces bug anyway...

Regarding the link, that's what I just did: http://25169193.hs-sites-eu1.com/movie?hs_preview=tAPayIXD-44455775933

Does this work now ? 

Thank's 

M.

[Anton]

Hi @MMimouni, 

this will require a slightly modification of the modules CSS file ('slick.min.css') which should be located at Marketplace/HubSpot/Logo_Carousel/Coded File in the Design-Manager/Design-Tools.

Search(STRG+F or CMD+F) for this part in the css

.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.

 and replace it with

.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);    display: flex;flex-wrap: nowrap;align-content: center;flex-direction: row;justify-content: space-around;align-items: center;}

now all your logos should be verticaly centered.

If you''d like to change it on tablet/mobile you can create custom media queries.

Best, 

Anton

[TiphaineCuisset]

Hi @MMimouni 

Thank you for reaching out.

I want to tag some of our experts on this - @Anton @Teun @tjoyce do you have any thoughts for @MMimouni on this? 

Thank you!

Best

Tiphaine