Okay
  Public Ticket #4564307
Mobile responsive
Closed

Comments

  • Aurelien started the conversation

    Hi Clapat Support Team,

    I purchased the Bennet theme and I'm experiencing a display issue on mobile with the Pinned List widget on my About page.

    The pinned-list-wrapper is overlapping the Team Members section above it on mobile. After inspecting the DOM, I can see that GSAP/ScrollTrigger generates a pin-spacer with a height of 3102px and a padding-bottom of 2745px, which causes the section to visually cover the content above it during scroll.

    Here are the relevant inline styles generated at runtime:

    pin-spacer: height: 3102px; padding: 0px 0px 2745px;
    pinned-lists-wrapper: inset: 0px auto auto 0px; transform: translate(0px, 0px);

    I've checked the demo site and noticed that on your About page, the pinned list works correctly on mobile. The structure of my page follows the same section order as your demo (Parallax List → Team Members → Pinned List).

    I've tried overriding the styles via custom CSS but since the styles are applied inline by GSAP, they cannot be overridden with !important.

    Could you please advise on the correct fix, or provide the Elementor JSON template for the About page so I can compare the exact widget settings?

    Thank you very much for your help.

  •  2,154
    Support replied

    Hello, to be short it's Elementor thing (the CSS it injects). try the following in customizer -> additional css

    @media screen and (min-width: 768px) {

        .elementor-3167 .elementor-element.elementor-element-cf43408 {

            --display: block;