SU Carousel imposes custom css style width:100% which affects other elements
-
The carousel shortcode, when placed in a widget (may affect elsewhere as well), causes an issue with other elements on the website, inline with the horizontal axis that the widget (or shortcode element) exists.
[carousel source="media: 2348,2347,2349,2350,2351,2352,2353" limit="30" link="custom" target="blank" width="400" autoplay="750" speed="1250" mousewheel="no" title="no" arrows="no" class="sponsors_block"]
This generates the following:
<div id="su_carousel_53f7f1e5b5ce9" class="su-carousel su-carousel-centered su-carousel-pages-no su-carousel-responsive-yes sponsors_block" style="width:100%" data-autoplay="750" data-speed="1250" data-mousewheel="false" data-items="3" data-scroll="1"><div class="su-carousel-slides">[...]
The problem is the 100% width. When scrolling down to where the carousel would be in-line with a dropdown CSS menu, image, or anything, it becomes non-clickable. I’ve tried setting the z-index of div.sponsors_block, and have confirmed it is placed on the background layer, however, it does not resolve the issue.
For whatever reason, this only seems to be a problem in Google Chrome (latest version 36.0.x). I’ve contacted Google on this matter, because the problem does not exist in the latest Firefox or Internet Explorer.
Screenshot: http://i57.tinypic.com/2m31vtz.jpg
- The topic ‘SU Carousel imposes custom css style width:100% which affects other elements’ is closed to new replies.