Search code examples
htmlcssbxslider

BxSlider active dot not aligning with the rest of the dots

I have the following site here, when i click on any on the dots on the carousel, the active dot moves up by a few pixels , in the dev tools if i remove the active class, its aligned back properly , i have not sure whats causing this as the only property i have attached to the .active class is the following:

.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
    background: #0e2240;
}

the padding , margin , height, width of the dots remain the same.

The HTML of the bxSlider controls is the following:

<div class="bx-pager bx-default-pager">
        <div class="bx-pager-item">
            <a class="bx-pager-link active" data-slide-index="0" href="">1</a>
        </div>
        <div class="bx-pager-item">
            <a class="bx-pager-link" data-slide-index="1" href="">2</a>
        </div>
        <div class="bx-pager-item">
            <a class="bx-pager-link" data-slide-index="2" href="">3</a>
        </div>
    </div>

I am unable to debug as to why this moving of positioning is happening, can somebody please point me to the right direction ?

Screenshot of the bug:

enter image description here

EDIT: it does't seem to be a problem with inline-block as if i remove the .active class, everything works fine.

Solution

  • Give only vertical-align:middle to .bx-wrapper .bx-pager-item class.

    .bx-wrapper .bx-pager-item {    
    vertical-align: middle;
}