modal not appearing on mobile - php

Question

I am trying to get bootstrap modal to work with my html/css slider, it is fetching the users previous purchases into the slider div and each order has an Ellipsis icon that brings up a modal with some options for that order, but in this case the modal is only popping up inside the <div class="slider">
but if I put the modal outside of the slider div then the modal doesn't show up at all, It seems to work fine on desktop but on mobile the modal will only open inside the slider,
I believe it's because my slider CSS is conflicting with my modal in some way, I'm assuming it's the display:flex;
So how can I work around this?
I tried messing with z-index to try and force the modal to the front regardless of device but it doesn't seem to work
I will include my CSS at the bottom of this question :)
UPDATE: I have created some images, This is the mobile version, you can see how the modal opens inside the div instead of outside of it.. https://ibb.co/Q639Zzy
Heres the desktop version working fine.. https://ibb.co/tb8Tc6S
<div class="slider">
<?php
$stmt = $dbh->prepare("SELECT * FROM `orders` WHERE `username` = '$userdetails' AND `confirmation` = 'Confirmed' ORDER BY `date` DESC");
$stmt->execute();
$fetchy = $stmt->fetchAll();
if (count($fetchy) == '0')
{
echo('<p>No previous orders..</p>');
}
else
{
foreach ($fetchy as $fetch) {
?>
<div class="slide" id="slide<?php echo $fetch['uid']; ?>">
<img src="/images/temp/<?php echo $fetch['prodimage']; ?>" style="width:80px;">
<!--- Button trigger modal --->
<i data-toggle="modal" data-target="#exampleModal<?php echo $fetch['uid']; ?>" class="fas fa-ellipsis-v"></i>
<!--- Modal --->
<div class="modal fade" id="exampleModal<?php echo $fetch['uid']; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
View Order
<br>
<form action="../../PHP/user_functions.php" method="POST">
<input type="hidden" value="<?php echo $_SESSION['usr_name']; ?>" name="username">
<input type="hidden" value="<?php echo $fetch['uid']; ?>" name="uid">
<input type="hidden" value="Cancelled" name="cancelopt">
<label style="cursor:pointer;text-decoration: underline;">
Cancel Order
<input type="submit" style="display:none;" name="cancel">
</label>
</form>
<form class="deleteorderchk" action="../PHP/user_functions.php" method="POST">
<input type="hidden" value="<?php echo $_SESSION['usr_name']; ?>" name="username">
<input type="hidden" value="<?php echo $fetch['uid']; ?>" name="uid">
<label style="cursor:pointer;text-decoration: underline;">
Delete from Recent Purchases
<input type="submit" style="display:none;" name="remove">
</label>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<?php
}}
?>
</div>
And here I have my CSS
<style type="text/css">
i.fa-ellipsis-v{
display: inline-block;
border-radius: 60px;
box-shadow: 0 0 2px #888;
padding: 0.5em 0.6em;
font-size: 14px;
}
.slider{
width:100%;
display:flex;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.slider::-webkit-scrollbar {
display:none;
}
.slide{
width:120px;
flex-shrink:0;
height:100%;
}
.slider > div{
scroll-snap-align:start;
}
</style>