After more than a month of coding I though I'm already finish it that's why I put it on hosting already, but after I check it on my mobile phone it shock me of the result :(
This is the result in mobile
anyone can give me an idea on what should I do? i dont want to make from scratch again this is my css, this is two column in 1 page with form in the left and table in the right
body {
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h3 {
position:relative;
text-align: center;
margin: 0;
font-size: 32px;
color: #fff;
z-index: 2;
}
.column {
float: left;
padding: 10px;
}
.left {
padding: 25px;
margin: 25px;
width: 40%;
border-radius: 5px;
box-shadow: 1 2px 5px #f5f5f5;
background: white;
border: solid 1px #ccc;
border: 2px solid dodgerblue;
}
.right {
padding: 25px;
margin: 25px;
width: 50%;
border-radius: 5px;
box-shadow: 1 2px 5px #f5f5f5;
background: white;
border: 2px solid dodgerblue;
}
.row:after {
content: "";
display: table;
clear: both;
}
input[type="text"]
{
display: inline-block;
float: left;
padding: 12px; line-height: 5px;
margin: 5px;
height: 40px;
}
label {
display: inline-block;
width: 150px;
padding-left: 5px
}
.main-block {
display: flex;
justify-content: center;
min-height: 100vh;
background-color: #85C1E9;
}
.btn-block {
margin-top: 10px;
text-align: center;
}
button {
outline: none;
font-family: Roboto, Arial, sans-serif;
border: none;
border-radius: 5px;
background: #00BFFF;
font-size: 50px;
color: #fff;
cursor: pointer;
}
button:hover {
background: cyan;
}
.msg {
margin: 30px auto;
padding: 10px;
border-radius: 5px;
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
width: 50%;
text-align: center;
}
.mix3 {
margin: 0px;
width: 100%;
border-width: strong;
padding: 10px 10px;;
}
This is the form
<div >
<div >
<a href="pv-form" title="Open Fullscreen PV Form" style="font-size:24px; color:black; float:right;" target="_blank"><i ></i></a>
<div >
<h5 style="text-align: center; margin-bottom:-10px"><b style="color:red"> STATUS:<a style="color:blue"> <?php echo $status; ?></a></b></h5>
</div>
<form name="frmUser" method="post">
<div><?php if(isset($message)) { echo $message; } ?>
</div>
<div >
<h3><b>Payment Voucher Form </b></h3>
</div>
<div style="margin-bottom:10px; margin-top:20px; " >
<label style="margin-left: 20px; font-weight: bold;" > <!-- class checkbox-inline to display checkbox inline -->
<!-- input type checkbox -->
<input type="checkbox" id="cashbox" value="Cash"> Cash
</label>
<label style="margin-left: -50px; font-weight: bold;" >
<input type="checkbox" id="chequebox" value="Cheque"> Cheque
</label>
<label style="margin-left: -50px; margin-right: -30px; font-weight: bold;" >
<input type="checkbox" id="banktransferbox" value="BankTransfer"> Bank Transfer
</label>
</div>
<input type="hidden" name="userid" value="<?php echo $row['ID']; ?>">
<div >
<input type="hidden" name="id" value="<?php echo $row['ID']; ?>">
<div >
<label>Payment Voucher ID</label>
<input placeholder="Payment Voucher ID" id ="pv_no" type="text" name="pvid" value="<?php echo $row['PViD']; ?>">
</div>
<div >
<label>Date</label>
<input placeholder="Date" type="text" id="pvdate" name="pvdate" value="<?php echo $row['PVDate']; ?>">
</div>
<div >
<label>Paid to</label>
<input placeholder="Paid to" type="text" name="pvname" value="<?php echo $row['Name']; ?>">
</div>
<div >
<label>Contact No.</label>
<input placeholder="Contact #" type="text" name="contactnumber" value="<?php echo $row['ContactNumber']; ?>">
</div>
<div style="padding-left: 20px">
<label>The Sum of</label>
<textarea placeholder="The Sum of" name="suminwords" ><?php echo $row['SumInWords']; ?></textarea>
</div>
<div style="padding-left: 20px">
<label>In Respect of</label>
<textarea placeholder="Respectof" name="respectof" ><?php echo $row['RespectOf']; ?></textarea>
</div>
<div >
<label>Price</label>
<input placeholder="Total" type="text" name="price" value="<?php echo $row['Price']; ?>">
</div>
<div >
<label>Cash</label>
<input placeholder="Cash" type="text" name="cash" value="<?php echo $row['Cash']; ?>">
</div>
<div style="float:right">
<label>Bank Name</label>
<input placeholder="Bank Name" type="text" name="bankname" value="<?php echo $row['BankName']; ?>">
</div>
<div >
<label>VAT 5%</label>
<input placeholder="VAT" type="text" name="vat" value="<?php echo $row['VAT']; ?>">
</div>
<div >
<label>Total</label>
<input placeholder="Total" type="text" name="total" value="<?php echo $row['Total']; ?>">
</div>
<div >
<label>Cheque No</label>
<input placeholder="Cheque No" type="text" name="chequenumber" value="<?php echo $row['ChequeNumber']; ?>">
</div>
<div style="float:right">
<label>Cheque Date</label>
<input placeholder="Cheque Date" type="text" id="cheque_date" name="chequedate" value="<?php echo $row['ChequeDate']; ?>">
</div>
<div style="margin-bottom: 150px"> </div>
<label > Remarks</label>
<div style="padding-left: 20px">
<textarea placeholder="Remarks" name="remarks" ><?php echo $row['Remarks']; ?></textarea>
</div>
<br>
<div style="float:right">
<label>Prepared By </label>
<input placeholder="Cheque No." type="text" name="preparedby" value="<?php echo $row['PreparedBy']; ?>">
</div>
<div style="float:right">
<label>Approved By </label>
<input placeholder="Cheque No." type="text" name="approvedby" value="<?php echo $row['ApprovedBy']; ?>">
</div>
<br><br><br><br><br>
<div style="float:right">
<label>Received By </label>
<input placeholder="Received By" type="text" name="receivedby" value="<?php echo $row['ReceivedBy']; ?>">
</div>
</div>
<div >
<div >
<button style="width:40%; padding: 10px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); color:black; margin-left: 20px" type="submit" name="submit" value="Submit"><b>Update / Add Record</b></button>
</div>
</div>
</form>
<button onclick="location.href='/payment-voucher'" type="button" style="width:30%; color:white; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); background-color:red; font-size: 15px; float:right; padding: 15px;"><b>Clear</b></button>
</div>
<div >
<a href="pv-records" title="Open Fullscreen PV Records" style="font-size:24px; color:black; float:right" target="_blank"><i ></i></a>
<div>
<h3><b>Payment Voucher List </b></h3>
</div>
<div >
<input size="50" type="text" name="search" id="search" placeholder="Search name.." />
</div>
<br><br><br>
<div >
<input type="text" name="from_date" id="from_date" placeholder="From Date" />
</div>
<div >
<input type="text" name="to_date" id="to_date" placeholder="To Date" />
</div>
<div >
<input type="button" name="filter" id="filter" value="Search" />
</div>
<div style="clear:both"></div>
<br>
<div id="pvoucher">
<table >
<tr style="background-color: #85C1E9; color:white; ">
<th>ID</th>
<th>PVID</th>
<th>PVDate</th>
<th>Name</th>
<th>Update</th>
<th>Delete</th>
<th>Print</th>
</tr>
</table>
<?php if (isset($_SESSION['message'])):
$e = $_SESSION['message'];
?>
<div >
<?php
$e = $_SESSION['message'];
echo '<tr>';
echo '<td colspan="5">'. $e . '</td>';
echo '</tr>';
unset($_SESSION['message']);
?>
</div>
<?php endif
?>
</div>
</div>
</div>
CodePudding user response：
You should use @media and for example when width of window is smaller than 700px set one column. You should also add meta tag to your html to give browser tips how should scal your website on mobile phones.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CodePudding user response：
Yes Lukas is right. You should use @media in your css.
And maybe you should use flexbox to display your columns..? I am French and I followed an excellent training on this technology (css, flexbox, media query) via OpenClassRoom And I was able to make this page (Curiculum Vitae dummy). Which adapts according to the size of the screen.