After inspecting the image provided, I am puzzled by why the images are overlapping each other. Despite my attempts to resize the images and apply the class="img-responsive", they still overlap. The column specified in the code snippet below is positioned next to another col-md-6, both of which are enclosed within a single row.
<div class="col-md-6">
<ul>
<li>
Whenever a user performs a long press on a cell, an alert pops up offering options to edit the item's name, delete the item, or dismiss the alert:
</li>
</ul>
<div class="row">
<div class="col-md-3">
<img src="images/ListMakeriOS/edit_or_cancel.png" alt="Initial long press dialog" width="300px">
</div>
<div class="col-md-3">
<img src="images/ListMakeriOS/edit.png" alt="Edit option selected after long press"
width="300px">
</div>
</div>
</div>