Tips, Tricks & Best Practices

MMimouni
Participante

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

12 Respuestas 12
apoore
Miembro

Logo Carousel

Hi @MMimouni @Anton 

 

How did you fix this issue? 

0 Me gusta
MMimouni
Participante

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 Me gusta
MMimouni
Participante

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
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

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
Participante

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 Me gusta
Anton
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

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 Me gusta
MMimouni
Participante

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 Me gusta
Anton
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

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
Participante

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 Me gusta
Anton
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

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
donrua
Colaborador líder

Logo Carousel

I could not find a logo carousel module in the HS marketplace. I selected Module search, put in "carousel", and only saw 6 options, none of them were a logo carousel.
I found sliders, and galleries, but was looking for a scrolling carousel.

Any chance I could get a link to where to find it?

0 Me gusta
TiphaineCuisset
Administrador de la comunidad
Administrador de la comunidad

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 !