Loading ...

Shadow issue with carousel in Chrome on a Mac | Communifire Support

Home » Spaces » Communifire Support » forum » Features and Functionality » Shadow issue with carousel in Chrome on a Mac
Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Add a new tab

Add a hyperlink to the space navigation. You can link to internal or external web pages. Enter the Tab name and Tab URL. Upload or choose an icon. Then click Save.

The name that will appear in the space navigation.
The url can point to an internal or external web page.
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Features and Functionality

Shadow issue with carousel in Chrome on a Mac

Subscribe to RSS
  • Xenon


    I have a carousel widget at the very top of my stacked article list, but when I view this in Chrome on my Mac, I notice the caption box is slightly off for some reason. I've tried inspecting it, but have not been successful in fixing it. 

    Chrome inspector says it's this:

    .axero-widget-carousel .carousel .carousel-inner .item .carousel-caption {
    1.  position: absolute;
    2.  left: 0;
    3.  right: 0;
    4.  bottom: 0;
    5.  padding: 25px 30px;}

    After making bottom: -1, it fixes the issue, but the same set of classes appear even after I have overrided them in my CSS. On my virtual machine that runs Windows 10, this same issue appears in Chrome as well. On my coworker's machine, which runs Windows 7, this issue is not visible.

    Which classes am I not selecting to get this adjusted?

    Lastly, I thought the widgets normally add a break after one another, but for some reason, the carousel widget is right against the widget below it. You can see a little bit of that in my screenshot above.

  • nvstiers
    Answered

    Hi Xeng,

    I suspect you need to have more specific selectors for the rule you are attempting to override.

    The widgets and rows do have a bottom margin. There may be custom css overrides or javascript that is removing or changing the margin.

  • Xenon

    Thanks. This was fixed after updating the custom CSS that was implemented.

Page 1 of 1 (3 items)