Streaming live at 10am (PST)

The images overlap in the slider

For several days I have been struggling with a slider in which the images overlap after the first slide. I have 2 sticky sliders on the site, one is moving okay, the other is causing problems. If you look at the site, check out the slider in the Giulia house section.

Thank you!

Hi, it looks fine in Win11 / Firefox & Chrome

Hi @Ozonify I’m experiencing problems in all browsers on macOS. There is a problem with your inline styling where you explicitly defining width of image that is contained in your slides. This problem may be not noticeable on small screens but your image should be always 100% of your slide.

scroll screenshot is from 27" monitor

When you delete this attribute for media queries magic happened :wink:

Hello Stan.

Thank you. Where exactly can I delete the attribute? I don’t know much about css.

Hi @Ozonify You do not know where you have set it in JS? It looks to me as custom code.

@Stan Nope, it’s not a custom code.

I’m not on comp now to check from where it is set as I’m not aware that it is added by WF slider. I will look in it at evening.

1 Like

I had now look on your read only on iPad and you have on your image in slide set only max-width this mean that image can’t be bigger than it’s original size. Instead set width to 100%. This will set image to take full width of its container. Hope this is a good start to solve it.

hi @Ozonify for now each image is named like image-59, image-61 as these are generated names. The first thing you should do is to give you slider image class let say silder-img and set width: 100%. Once class is created apply this class on all images in this slider to have unified behaviour.

It worked. Thank you very much @Stan. :partying_face:

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.