Carousel tiles box shadow issue

  • Resolved pgdev

    (@pgdev)


    9 months, 2 weeks ago

    Hi all, The box shadow on the carousel tiles doesn’t appear rounded, even though I applied border radius to the tiles. Could anyone please point out the issue with solution ?

    Reference img :
    https://prnt.sc/x7DA5cayN7Tl

    Code responsible: 

    .swiper-slide {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 20px;
    height: 220px
;
    border-radius: 22px;
    box-shadow: 6px 6px 6px #00000029 !important;
}

    Thanking you in advance.

    • This topic was modified 9 months, 2 weeks ago by pgdev.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello, the parent container of the .swiper-wrapper div has an overflow: hidden rule and that is cropping out the rounded box shadows. Please try the following:

    /* Add some padding so the rounded box shadow becomes visible. Between 10px and 12px seems to help */
.wpcp-carousel-section.wpcp-standard {
  padding: 12px;
}

    Hope this helps and good luck!

    Thread Starter pgdev

    (@pgdev)

    Thanks! It worked perfectly.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Carousel tiles box shadow issue’ is closed to new replies.