Tips, Tricks & Best Practices

MMimouni
Participant

Logo Carousel

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, 

 

MehdiCapture d’écran 2021-11-19 à 16.14.38.png

11 Replies 11
apoore
Member

Logo Carousel

Hi @MMimouni @Anton 

 

How did you fix this issue? 

0 Upvotes
MMimouni
Participant

Logo Carousel

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

0 Upvotes
MMimouni
Participant

Logo Carousel

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, 

 

MehdiCapture d’écran 2021-11-22 à 16.40.31.png

Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Logo Carousel

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

Anton Bujanowski Signature
MMimouni
Participant

Logo Carousel

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

 

 

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Logo Carousel

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

 

 

Anton Bujanowski Signature
0 Upvotes
MMimouni
Participant

Logo Carousel

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

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Logo Carousel

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

Anton Bujanowski Signature
MMimouni
Participant

Logo Carousel

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.

 

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Logo Carousel

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

Anton Bujanowski Signature
TiphaineCuisset
Community Manager
Community Manager

Logo Carousel

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


Saviez vous que la Communauté est disponible en français?
Rejoignez les discussions francophones en changeant votre langue dans les paramètres !

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !