Basically I want to make this page responsive so it is easily viewed on a mobile device using only the bootstrap grid(container, rows, columns) no styling from Bootstrap. Right now it is not doing so despite me having tried numerous ways. My other pages that do not have PHP have not given me much trouble but this one has and I cannot get it to display well on a phone.
I tried starting with the container at the very top of the page, outside the php block then making a row for my h2 tags and trying to do the same inside my while loop. However, it did not become responsive and the results and the column headers were not align properly.
"headerprofile.php"
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-grid.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<?php
require_once('includes/headerprofile.php');
require_once('includes/database.php');
?>
<html>
<head>
<style>
form.searchbar {
margin: 25px 50px;
}
h1.profile {
margin: 25px 50px;
}
h2 {
margin: 20px 45px;
}
h1 {
text-align: center;
}
p {
margin: 20px 45px;
}
.responsive {
width: 100%;
height: auto;
}
body {margin: 0;}
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(119,13,41);
}
ul.nav li {float: left;}
ul.nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.nav li a:hover:not(.active) {
background-color: rgb(237,235,235);
color: rgb(119,13,41);
}
ul.nav li a.active {
background-color: rgb(169,5,51);
}
ul.nav li.right
{
float: right;
}
@media screen and (max-width: 600px) {
ul.nav li.right,
ul.nav li {float: none;}
}
.table {
display: table;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.tr{
display: table-row;
padding: 7px;
}
.td{
display: table-cell;
padding: 7px;
}
</style>
</head>
<body>
<h1 class="profile"> My Appointments </h1>
<div class ="search" id="browse">
<p> Find your appointment below or search by keyword</p>
<form id="" class="searchbar" action="searchAppt.php" method="get">
<input type="text" name="terms" size="40" class = "sbar" required value="Search by keyword" oninput="validity.valid||(value='');"
onblur="if (this.value == '') {
this.value = 'Enter keyword';
}"
onfocus="if (this.value == 'Enter keyword') {
this.value = '';
}"/>
<button type="submit" class = "btn">Search</button>
</form>
</div>
</div>
<hr>
<h2> Future Appointments</h2>
<p>
<label> Appointment(s): <br/>
<?php
$sql = "select a.id, a.lname, a.fname, a.phonenum, a.room, a.building, a.issue, a.start_time, a.end_time, a.username
from appointments as a
where a.email = '". $_SESSION['email'] ."' and a.start_time >= NOW()
";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "<div class='table'>
<div class='tr'>
<div class='td'><b>Ticket #</b></div>
<div class='td'><b>Username</b></div>
<div class='td'><b>Building</b></div>
<div class='td'><b>Issue</b></div>
<div class='td'><b>Date</b></div>
<div class='td'><b>Start Time</b></div>
<div class='td'><b>End Time</b></div>
<div class='td'></div>
</div>";
// output data of each row
while($row = $result->fetch_assoc()) {
$starttimefuture = strtotime($row["start_time"]); //converts date time received from MySQL into a string
$endtimefuture = strtotime($row["end_time"]);
$datefuture = date("m/d/y", $starttimefuture);
$startfuture = date("g:i A", $starttimefuture);
$endfuture = date("g:i A", $endtimefuture);
$buildingfuture = str_replace('_',' ', $row["building"]);
echo "<div class='tr'>
<div class='td'>".$row["id"]."</div>
<div class='td'>".$row["username"]."</div>
<div class='td'>".$buildingfuture."</div>
<div class='td'>".$row["issue"]."</div>
<div class='td'>".$datefuture."</div>
<div class='td'>".$startfuture."</div>
<div class='td'>".$endfuture."</div>
<div class='td'><form action='ticketdetails.php' method='post'>
<input type='hidden' name='id' value='".$row["id"]."'>
<input type='submit' value='Ticket Details'></form>
</div>
</div>";
}
echo "</div>";
} else {
echo "<br/><b>No future appointments!</b>";
}
?>
</label>
</p>
<hr>
