I have a series of full-screen sections in Visual Composer and I am trying to add an arrow at the bottom of each one to indicate to users that they should scroll for more content. However, my attempts with absolute positioning on the divs containing the icon have not been successful. All I have managed to do is move the icon by a few pixels.
<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>
Existing 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%;
}
The icon being used is Defaults-chevron-down.
Any suggestions on how to properly position this icon within the sections?