Striving for a seamless cross-browser experience for our clients, I recently encountered an issue that has me stumped. The website is running smoothly on all browsers except for Mozilla Firefox. In Firefox, there is a wide white space on the right side of the main content area, caused by the responsive css3 slider. You can view the complete code of the slider in action on jsfiddle:
The problem lies in each hidden article
tag taking up space even when not displayed in Mozilla. As the slider progresses, the white space reduces due to upcoming slides being hidden but still occupying space. This results in unnecessary empty space on the right side.
https://i.sstatic.net/6OhtH.jpg
You can visit the actual website at:
My Website
I hope I have explained the issue clearly. What do you suggest as a possible solution to this problem?