Wordpress Elementor CSS shape-outside не плавает - PullRequest
Новая
       107

Wordpress Elementor CSS shape-outside не плавает

0 голосов
/ 06 августа 2020

Я пытаюсь создать простой div, в котором текст формируется вокруг изображения круга. Я использую wordpress и Elementor. Я создал новый раздел и поместил в него код html. 

  <div class="row-element">
      <div class="review">
        <figure class="review__shape">
          <img
            src="img.jpg"
            alt="image"
            class="review__image"
          />
        </figure>
        <div class="review__text">
          <h3 class="heading u-margin-bottom-small">
            TITLE OF REVIEW
          </h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            ea laudantium provident, enim nulla voluptatibus numquam fugit
            iusto consequuntur cumque dolor expedita facilis minima libero
            distinctio quis quas porro totam.libero distinctio quis quas
            porro totam?
          </p>
        </div>
      </div>
    </div>

и вот мой css

.review {
  width: 75%;
  margin: 0 auto;
  box-shadow: 0 3rem 6rem rgba($color: #000, $alpha: .1);
  background-color: rgba(#fff, .6);
  border-radius: 3px;
  padding: 6rem;
  padding-left: 9rem;
  font-size: 1.5rem;
}

.review__shape {
  position: relative;
  width: 15rem;
  height: 15rem;
  float: left;
  -webkit-shape-outside: circle(50% at 50% 50%);
  shape-outside: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  transform: translateX(-3rem);
}

.review__image {
  height: 100%;
  transform: translateX(-3rem) scale(1.4);
  backface-visibility: hidden;
  transition: all .5s;
}

Проблема в том, что я не могу позволить фигуре плавать осталось. Elementor имеет весь дисплей, настроенный на flexbox, и я попытался изменить раздел для отображения: inline-block, но ничего не изменилось.

Любая помощь?

...