I'm struggling to make my bootstrap tabs mobile-friendly. While I like their appearance on desktop, I find that they don't look great when stacked on top of each other on mobile devices.
Is there anyone who can provide some CSS tips on how to shrink the tabs so they maintain a similar appearance to desktop view?
Here is my HTML and CSS code:
<div class="centerTab">
<div class="container breadcrumb">
<ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-1" role="tab">Your Information</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-2" role="tab">Service Requirements</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-3" role="tab">Documents Needed</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-4" role="tab">Thank You!</a>
</li>
</ul>
</div>
/* customized tab style */
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
border: 0;
background-color: #fff;
}
.nav-pills > li > a {
/* padding: 10px 70px; */
}
.nav-pills > li.active {
border-bottom: 3px solid #005DA8!important;
}
.breadcrumb {
background: #ddd;
background-color: #e9ecef!important;
display: inline-block!important;
padding: 1px;
padding-right: 15px;
}
.breadcrumb li {
display: inline-block;
background: white;
padding: 0;
position: relative;
min-width: 50px;
text-decoration: none;
-webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
margin-right: -13px;
}
.breadcrumb li#last {
-webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
}
.breadcrumb li:hover {
color: white;
background: #fff;
}
/* ensure first link has no clipping on the left side */
.breadcrumb li:first-child {
-webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}
.label{
height: 100%;
width: 100%;
}