Hi
I have a gap between two lists when using responsive grid. Not sure if I’m missing something .
Without responsive grid
With responsive
Thanks !
Can you show your HTML?
This works:
<div class="block-title"><i class="fa fa-paper-plane text-color-orange"></i> Itineraries</div>
<div class="list accordion-list">
<ul>
<li class="accordion-item" id="itnAccd">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Active trips</div>
<div class="item-after" id="itnAccdSum">
<span class="badge">0</span>
</div>
</div>
</a>
<div class="accordion-item-content">
<div class="list media-list" id="itnAccdCnt">
<ul>
<li>
<div class="item-content">No record</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="block-title"><i class="fa fa-suitcase text-color-blue"></i> Rewards</div>
<div class="list accordion-list">
<ul>
<li class="accordion-item" id="rwdAccd">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">
Select
</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<div class="list media-list" id="rwdSmryIMbl">
<p>Loading...</p>
</div>
</div>
</div>
</li>
</ul>
</div>
This create the gap:
<div class="row">
<div class="col-100 tablet-50">
<div class="block-title"><i class="fa fa-paper-plane text-color-orange"></i> Itineraries</div>
<div class="list accordion-list">
<ul>
<li class="accordion-item" id="itnAccd">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Active trips</div>
<div class="item-after" id="itnAccdSum">
<span class="badge">0</span>
</div>
</div>
</a>
<div class="accordion-item-content">
<div class="list media-list" id="itnAccdCnt">
<ul>
<li>
<div class="item-content">No record</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-100 tablet-50">
<div class="block-title"><i class="fa fa-suitcase text-color-blue"></i> Rewards</div>
<div class="list accordion-list">
<ul>
<li class="accordion-item" id="rwdAccd">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">
Select
</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<div class="list media-list" id="rwdSmryIMbl">
<p>Loading...</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>This is how CSS works, and it is called Box Model:
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
Tweak styles to match your needs
