Flipster P выходит за пределы родительского div - PullRequest
Новая
       13

Flipster P выходит за пределы родительского div

0 голосов
/ 31 декабря 2018

Я делаю слайдер для флипстера, где люди могут давать отзывы о компании.Но текст течет за пределами div.Я пробовал множество вещей, но я не могу заставить его работать так, как я этого хочу.Вот что у меня есть:

https://imgur.com/dfLlUSg

и вот что я хочу:

https://imgur.com/f61MFCf

Я использую Расширенные пользовательские поляПоле повторителя.

Кроме того, две строки текста (над картинкой) не имеют пробелов, я не знаю почему.

Вот как он построен:

https://imgur.com/MX49WWB

Может ли кто-нибудь помочь мне с этим?

Это какой-то дополнительный SCSS: 

.flipster {
    //margin-top: 75px;
    ul {
        height: 483px !important;
        margin-top: 5px;
        .flipster__item--current article {
            box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.2);
        }
        li {
            &.flipster__item--future {
                .flipster__item__content {
                    //transform: rotate(0) !important;
                }
            }

            &.flipster__item--past {
                .flipster__item__content {
                    //transform: rotate(0) !important;
                }
            }


            article,
            .flipster article {
                padding: 45px;
                width: 460px;
                margin: 10px auto;
                height: 460px;
                background: #fff;
                box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, .1);

                .quote {
                    text-align: center;
                    p {
                        font-size: 32px;
                        text-align: center;
                    }
                }
                .quote-persoon {
                    p {
                        font-size: 18px;
                        color: $oranje;
                        text-align: center;
                        padding: 35px 0 5px 0;
                        display: block;
                    }
                    span {
                        font-size: 16px;
                        width: 100%;
                        display: block;
                        text-align: center;
                    }
                    img {
                        margin: 35px auto 0 auto;
                        display: block;
                        border-radius: 75px;
                    }
                }
            }
        }
    }
    .flipster__button {
        opacity: 1;
        svg {
            color: $oranje;
        }
    }
}

Когда я перезагружаю страницу, я вижу, что все внутри div, как и должно быть, но потом она быстро выскакивает

1 Ответ

0 голосов
/ 31 декабря 2018

Я нашел проблему.это было в контейнере ul.flipster__.была строка css: пробел: nowrap;понятия не имею, почему это будет полезно

...