Felx slider Images Not Showing Up at certian screen sizes, in OpenCart

Question

Flex slider images are loading.
I am able to see when I inspect element
but they are not showing up in the browser.

This is the link to the website: http://www.rgsandsons.com

Now I have found out that it's showing up at certain screen sizes, tried re-sizing the browser.

Why is it not showing for all screen sizes?

Answer 1

There is only a small but hard to notice problem, when you resize your browser flexslider shows an img tag instead of the css background it uses when on full screen for example.

The only thing you have to do is edit the name of the image as if you notice css background url and img src do not work the same when getting the images, if you remove spaces and make the name of the image clean without spaces and special characters (please also try and remove path white spaves) everything will be ok.

url(http://rgsandsons.com/image/cache/data/TEST SLIDER/3-1920x550.jpg) 50% 0 no-repeat

should be something like that:

url(http://rgsandsons.com/image/cache/data/TEST-SLIDER/3-1920-550.jpg) 50% 0 no-repeat

change folder name or upload on another folder, and remove special characters from image name.

This is certainly the issue here, so as soon as you make these changes everything will be fine.