Выровняйте стрелку прокрутки вниз по нижнему центру полноэкранного div в WPBakery Visual Composer

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

<section class="l-section wpb_row height_full valign_center width_full with_img" id="home">
<div class="l-section-img loaded" data-img-width="1920" data-img-height="809">
</div>

<div class="l-section-h i-cf">
<div class="g-cols vc_row type_default valign_top">
<div class="vc_col-sm-12 wpb_column vc_column_container">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="w-image align_center" id="mainlogo">
<div class="w-image-h"><img src="logo.png" class="attachment-full size-full">
</div>
</div>


<div class="ult-just-icon-wrapper">
<div class="align-icon" style="text-align:center;">

<a class="aio-tooltip" href="#whatis">
<div class="aio-icon none " style="display:inline-block;">

<i class="Defaults-chevron-down"></i>

</div>
</a>

</div></div></div></div></div></div></div>
</section>

Существующий CSS:

.aio-icon.none {
    display: inline-block;
}
.aio-tooltip {
    display: inline-block;
    width: auto;
    max-width: 100%;
}
.vc_column-inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
}
.wpb_column {
    position: relative;
}
.vc_column_container {
    display: flex;
    flex-direction: column;
}
.vc_row {
    position: relative;
}
.l-section-h {
    position: relative;
    margin: 0 auto;
    width: 100%;
}

Сам значок имеет вид По умолчанию-шеврон-вниз.

У вас есть идея, как правильно расположить этот значок?


wordpress css wpbakery visual-composer
person Alex    schedule 24.04.2019    source источник
comment
расположите относительно родителя div и position:absolute на значке и расположите его там, где хотите, вы пробовали это, и это не сработало? Пожалуйста, поделитесь CSS, который вы пробовали   -  person Mihai T    schedule 24.04.2019
comment
спасибо за попытку помочь. я пробовал position:relative и absolute для всех родительских/дочерних div на странице, но безуспешно. может что-то в существующем css стоит на пути? я вставил существующий css, который генерирует WPBakery.   -  person Alex    schedule 24.04.2019
comment
.wpb_row { position: relative } .ult-just-icon-wrapper { position: absolute; bottom:0; margin:0 auto; } попробуйте это или что-то в этом роде. Должно сработать.   -  person Mihai T    schedule 24.04.2019
comment
не работает, к сожалению :(   -  person Alex    schedule 24.04.2019

Ответы (2)


arrow_upward
1
arrow_downward

Я тоже немного мучился с этим. Но для этого есть довольно быстрое и грязное решение:

Просто поместите еще одну строку ниже строки полной высоты. Поместите туда свой значок и задайте этому элементу верхнее поле, например -200 пикселей.

По какой-то странной причине довольно логичный подход к размещению значка в самой строке полной высоты и абсолютному размещению его внизу не поддерживается должным образом источником, сгенерированным из WPB.

person user14595192    schedule 07.11.2020

arrow_upward
0
arrow_downward

У меня была эта проблема на этой неделе. То, как я решил это, добавило значок в эту строку/раздел (в моем случае один элемент изображения с пользовательской ссылкой на .svg) и добавил к нему класс.

Тогда CSS для класса был таким:

position:absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
margin-top:-30px;

(Я добавил отрицательное поле сверху, так как заметил, что значок немного обрезается на моем телефоне Google Pixel с фиксированной нижней панелью, поэтому он немного приподнялся.)

person jfar_2020    schedule 19.01.2021