My layout includes 2 columns in a single row, which is functioning properly on most devices. However, when viewed on an iPad, the layout does not span the full width of the screen.
Here is a snippet of my code:
<div class="row">
<div class="col-xl-8 col-lg-8 col-sm-12">
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
<p class="grey font-small-2"></p>
</div>
<div class="row align-self-center">
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
ID: </a></span>
</div>
<div class="d-inline-block">
<span class="">
<span class="display-block overflow-hidden">
{{selectedPatient?.mrn}}</span>
</span>
</div>
</div>
</li>
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Case #:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span class="display-block overflow-hidden"> Ninja Developer</span>
</span>
</div>
</div>
</li>
</ul>
</div>>
<!-- Additional columns and content go here -->
</div>>
</div>
</div>
</div>
</div>
</div>
https://i.sstatic.net/s7XTA.png
Despite trying various column size classes, such as col-xl-8 col-lg-8 col-sm-12, to ensure full width display, the iPad still shows some white space around the layout. This results in the text overflowing the designated area. The goal is to achieve full width display on the iPad to cover the entire white space.