Having a container created with boostrap:
https://i.sstatic.net/bqAuf.png
The question at hand is how to implement horizontal scrolling in order to maintain the aspect ratio of the initial image within the container on phone resolutions.
Here is the container displayed in phone resolution:
https://i.sstatic.net/8Qqsh.png
I am not satisfied with this presentation.
This is the current code being used:
<div class="card-body scroll" style="border: none;">
<div class="cont">
<div class="row">
<div class="col-sm-12">
<div class="card" style="border: none;">
<div class="box-header">
<div class="row">
<div class="col-sm-8">
<h3 class="box-title w-text">Business Management</h3>
</div>
<div class="col-sm-4">
<div class="box-tools">
<div class="input-group-prepend">
<input type="text" name="table_search" class="form-control pull-right" placeholder="Search" ng-model="searchField">
<span class="input-group-text">
<i class="fa fa-filter"></i>
</span>
<span class="input-group-text">
<i class="fas fa-plus"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<strong>Company Name</strong>
</div>
<div class="col-sm-3">
<strong>Tax ID</strong>
</div>
<div class="col-sm-2">
<strong>Fiscal Address</strong>
</div>
<div class="col-sm-2">
<strong>Active</strong>
</div>
<div class="col-sm-2">
<strong>Actions</strong>
</div>
<hr style="border: none;">
</div>
<div class="row" style="text-align: center;">
<div class="col-sm-3">
<h3>Central Vendor</h3>
</div>
<div class="col-sm-3">
<h3>J-XYZ</h3>
</div>
<div class="col-sm-2">
<h3>Test Company</h3>
</div>
<div class="col-sm-2">
<h3>Active</h3>
</div>
<div class="col-sm-2" style="color: orange;">
<i class="fas fa-chevron-circle-down"></i>
</div>
<div class="col-sm-3">
<h3>Regional Sun Distributor</h3>
</div>
<div class="col-sm-3">
<h3>J-1234567890</h3>
</div>
<div class="col-sm-2">
<h3>National Highway</h3>
</div>
<div class="col-sm-2">
<h3>Active</h3>
</div>
<div class="col-sm-2" style="color: orange;">
<i class="fas fa-chevron-circle-down"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If anyone can provide assistance, it would be greatly appreciated! Thank you!