Почему верхний слой не применяется к моему разделу? - PullRequest
Новая
       13

Почему верхний слой не применяется к моему разделу?

0 голосов
/ 11 ноября 2019

У меня есть раздел, который должен иметь отступ 150px сверху и снизу указанного раздела, но, несмотря ни на что, я не могу отобразить отступ. Пример здесь: http://new.cajunland.com/recipe/double-seasoned-cajun-hamburgers/

Вот код для раздела: 

.wp-block-mkl-section-block .section-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
    max-width: none;
    z-index: 0;
}
section.section-hero .wp-block-columns.has-2-columns {
    max-width: 1080px;
    margin: 0 auto;
}
.wp-block-columns {
    flex-wrap: nowrap;
}
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
}
*, ::before, ::after {
    box-sizing: inherit;
}
.wp-block-column.col-two-third {
    flex-basis: calc(60% - 16px);
}
.wp-block-column {
    margin-bottom: 0 !important;
}
.wp-block-column {
    flex-basis: calc(50% - 16px);
    flex-grow: 0;
}
.wp-block-column {
    flex-grow: 1;
    margin-bottom: 1em;
    flex-basis: 100%;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}
.wp-block-column.col-one-third {
    background: rgb(255,255,255,.9);
    flex-basis: calc(40% - 16px);
    padding: 16px 24px;
}
<section class="wp-block-mkl-section-block section-hero" style="padding-bottom:150px;padding-top:150px">
        <div class="section-bg bg__stretched" style="background: url(http://new.cajunland.com/wp-content/uploads/2019/10/recipe-double-seasoned-cajun-burger.jpg) no-repeat fixed center/100%">
<div class="wp-block-columns has-2-columns">
            <div class="wp-block-column col-two-third">
                <p>&nbsp;</p>
            </div>
            <div class="wp-block-column col-one-third">
                <h1>Double Seasoned Cajun Hamburgers</h1>
                <p style="color:#000;"><strong>Yield:</strong> 4<br><strong>Prep Time:</strong> 15 minutes<br><strong>Cook Time:</strong> 10-15 minutes</p>
            </div>
        </div>
    </div>
</section>

Ответы [ 4 ]

1 голос
/ 11 ноября 2019

Я проверил ваш пример страницы padding-top, и padding-bottom работает. см. ниже screenshort

Но вы исправили раздел section-bg, используя position: absolute , так что отступы top и bottom работают, но не влияют ни на что. Вы должны задать отступ для класса section-bg. 

.wp-block-mkl-section-block .section-bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: no-repeat;
  max-width: none;
  z-index: 0;;
  padding-bottom: 150px;
  padding-top: 150px;
}

codepen

0 голосов
/ 11 ноября 2019

Я решил это. Jaakko был частично прав насчет позиции переключения: абсолютный относительно относительного в .section-bg div. Я также переместил фоновое изображение в родительский раздел, так что теперь оно включено. Исправлено все это. Спасибо всем.

0 голосов
/ 11 ноября 2019

Попробуйте это и удалите отступы: 150px сверху и снизу от встроенных стилей. 

.wp-block-mkl-section-block .section-bg {
    position: absolute;                 /* Remove this line */
    padding-bottom: 150px!important;    /* Add !important   */
    padding-top: 150px;                 /* Add !important   */
    top: 0;                             /* Remove this line */
    left: 0;                            /* Remove this line */
    bottom: 0;                          /* Remove this line */
    right: 0;                           /* Remove this line */
    background-repeat: no-repeat;
    max-width: none;
    z-index: 0;
    margin: 0 auto;
}
0 голосов
/ 11 ноября 2019

Заполнение есть, но в поле .section-bg есть position: absolute и top: 0.

. Вы можете увеличить верхнее значение и переместить свойство background в раздел. И, возможно, используйте height: 300px вместо отступов.

...