I am facing issues with the responsiveness of my address map tabs design. The layout looks incorrect after 800px and some gaps are appearing on the left side of the tab. I have tried using media queries but it's still not optimizing well for mobile, tablets, and iPads. Below is the code snippet I have been working with:
$('#bologna-list a').on('click', function(e) {
e.preventDefault()
$(this).tab('show')
}).address {
width: 141px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-12 col-lg-9 col-sm-12 col-md-6" style="margin-top: 10px;margin-bottom:14px;">
<div class="card" style="background-color: lightgoldenrodyellow;">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="bologna-list" role="tablist">
<li class="nav-item address">
<a class="nav-link active" href="#description" role="tab" aria-controls="description" aria-selected="true">KalyanNagar</a>
</li>
<li class="nav-item address">
<a id="mm" class="nav-link" href="#history" role="tab" aria-controls="history" aria-selected="false">MS-Palya</a>
</li>
...
</ul>
</div>
<div class="card-body" style="line-height: 1.2;margin-left:26px;margin-top:-46px">
...
<!-- Content for each tab goes here -->
...
</div>
</div>
</div>Here is an image showcasing our UI: