Client logos are loading unusually

Shapely
1

Hi again Noda,

There is some stranger behavior happening with my clients’ logos in the logo slider.
Sometimes, when I visit the webpage, it shows the logos like this:

HoverPre
HoverPre1203×209 13.8 KB

Notice how the Orbit logo is rather large (this happens on other logos sometimes in the slider). But, when I place my cursor over the logo, it instantly changes to:

HoverAfter
HoverAfter759×165 7.54 KB

It seems like some odd loading effect happening here. Do you know what script is causing it or how to remedy it? Notice after I have hovered over it, the spacing between “Orbit” and “Hyatt” has been corrected and the logo(s) display correctly.

You may not be able to reproduce it on first visit, and if you’re not, try clearing your cache and trying on Chrome and Edge.

Website

2

Hey there

Hope you are doing well :slight_smile:

Well, I believe its a carousel “thing”? basically, when you load the page you see different logos because of they are scrolling, their order is always the same but while they are scrolling you see different logos for example as a number one ? is this a problem? :slight_smile:

3

Hey, Noda! Doing well, my friend. Hope you are, too. Appreciate all of your wonderful help that you have always provided.

You are exactly right, it is behaving like a carousel which isn’t the problem. Click play and watch this video that I recorded to show you the issue that sometimes occurs. I am not sure what is causing it. The logo resizes upon hovering over it, and it will happen with some other logos. This is the problem.

4

Howdy :slight_smile:

I can help with the image width but not with the initial question in this ticket :slight_smile:
Here is your css code to fix logo width problem:

.shapely_home_clients li img { max-width: 100% !important; }

Regards

5

Hi, Noda! For some reason, still didn’t fix the Orbit logo. Notice how it appears very large, and then once you scroll over it, it auto resizes to something smaller and better. I am not sure why this behavior is occuring.

Before mouse over:
BeforeClick

After mouse over:
AfterClick

Thanks for any help that you can provide!

6

Hi there

Ok, lets try something else:

.logo-carousel .slides a {
    display: block;
}
.shapely_home_clients li img {
width: auto !important;
}
7

Before I insert that, do you want me to remove the old CSS code that you provided in this post?
Thanks so much!

8

Hi

Yes, remove it and use this one :slight_smile:

9

Applied this fix, but it didn’t fix it. I wonder if it’s just the Orbit logo causing an error? I maybe should try a different size of it. Any dimension recommendations?

10

hi

Vey strange thin, the problem is that I cant see the “problem” CSS is created by symptoms :slight_smile:

Yep, try to use a rectangular logo and check again :slight_smile:

Regards

11

Seems to have done the trick. Thanks, Noda!

12

That’s nice to hear :slight_smile: