ToddT ToddT - 1 month ago 11
CSS Question

Bootstrap and CSS - fix formating of pills

I have these Bootstrap pills I'm trying to get to work, my example is linked below:

https://dynamic-shipping-fixed-trimakas.c9users.io/#settings

I've increased the size of the font, which throws off the size of the box's and creates that "stepped" look where the arrow shape isn't the full size of the boxes anymore.. I've been trying to fix it and can't, my CSS skills are less than desirable..

I changed the font size in the

body
, and I'm pretty sure this is the CSS that's effected, but I can't seem to fix it..

*::before, *::after {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
.nav-pills.nav-wizard > li + li {
margin-left: 0;
}
.nav-pills.nav-wizard > li {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
overflow: visible;
position: relative;
}
.nav-pills > li + li {
margin-left: 2px;
}
.nav-pills > li {
float: left;
}
.nav > li {
display: block;
position: relative;
}
* {
box-sizing: border-box;
}

Answer

You'll need to play around with the border-width values on the :before and :after pseudo-elements. 24px 0 24px 20px got it looking somewhere close to correct for me.

.nav-pills.nav-wizard > li:not(:first-child) a:before {
    position: absolute;
    content: "";
    top: 0px;
    left: -20px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 24px 0 24px 20px;
    border-color: #eee #eee #eee transparent;
    z-index: 150;
}
.nav-pills.nav-wizard > li:not(:last-child) a:after {
    position: absolute;
    content: "";
    top: 0px;
    right: -20px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 24px 0 24px 20px;
    border-color: transparent transparent transparent #eee;
    z-index: 150;
}
Comments