Tekil Mesaj gösterimi - php sayfayı responsive yapma hk.

Konu php sayfayı responsive yapma hk.
02-06-2021, 23:28:37
Arkadaşlar merhaba dün mysql konusunda destek almıştım. Güzel bir tasarımı sayfaya entegre ettim ama responsive yapmada takıldım. 3 tane yanyana olan tablolardan oluşan bir sayfam var. Bu sayfamı responsive yapmak için ne yapmam gerekiyor?
<?php
include("databaseconnection.php");
?>
<?php
$sorgu=$vt->prepare("SELECT * from sorgu where id=:id");
$sorgu->execute(array('id' => $_GET['id']));
$sorgucek=$sorgu->fetch(PDO::FETCH_ASSOC);

?>
<html>
<head>


<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<style type="text/css">
/** Inspired by: http://graphicburger.com/flat-design-ui-components/ **/
/** Line-chart and donut-chart made by @kseso https://codepen.io/Kseso/pen/phiyL **/


/** Inspired by: http://graphicburger.com/flat-design-ui-components/ **/
/** Line-chart and donut-chart made by @kseso https://codepen.io/Kseso/pen/phiyL **/


/************************************ FONTS ************************************/
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700);
@import url(https://weloveiconfonts.com/api/?family=entypo|fontawesome|zocial);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* fontawesome */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
@font-face {
font-family: 'icomoon';
src:url('https://jlalovi-cv.herokuapp.com/font/icomoon.eot');
src:url('https://jlalovi-cv.herokuapp.com/font/icomoon.eot?#iefix') format('embedded-opentype'),
url('https://jlalovi-cv.herokuapp.com/font/icomoon.ttf') format('truetype'),
url('https://jlalovi-cv.herokuapp.com/font/icomoon.woff') format('woff'),
url('https://jlalovi-cv.herokuapp.com/font/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-cloudy:before {
content: "\e60f";
}
.icon-sun:before {
content: "\e610";
}
.icon-cloudy2:before {
content: "\e611";
}
/************************************* END FONTS *************************************/

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
background: #1f253d;
}

ul {
list-style-type: none;
margin: 0;
padding-left: 0;
}

h1 {
font-size: 23px;
}

h2 {
font-size: 17px;
}

p {
text-decoration: none;
font-size: 15px;
}

a {
text-decoration: none;
font-size: 15px;
}


h1, h2, p, a, span{
color: #fff;
}
.scnd-font-color {
color: #9099b7;
}



.horizontal-list {
margin: 0;
padding: 0;
list-style-type: none;
}
.horizontal-list li {
float: left;
}

.clear {
clear: both;
}

.icon {
font-size: 25px;
}

.titular {
display: block;
line-height: 60px;
margin: 0;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.button {
display: block;
width: 175px;
line-height: 50px;
font-size: 16px;
font-weight: 700;
text-align: center;
margin: 0 auto;
border-radius: 5px;
-webkit-transition: background .3s;
transition: background .3s;
}




.profile-picture {
border-radius: 100%;
overflow: hidden;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;

}
.big-profile-picture {
margin: 0 auto;
border: 5px solid #50597b;

width: 150px;
height: 150px;
}
.small-profile-picture {
border: 2px solid #50597b;
width: 40px;
height: 40px;
}


/** MAIN CONTAINER **/

.main-container {
font-family: 'Ubuntu', sans-serif;
width: 950px;
height: 100%;
margin: 1em auto;
}
/*********************************************** HEADER ***********************************************/

.profile-menu {
float: right;
height: 80px;
padding-right: 20px;
}
.profile-menu p {
font-size: 17px;
display: inline-block;
line-height: 76px;
margin: 0;
padding-right: 10px;
}
.profile-menu a {
padding-left: 5px;
}

.small-profile-picture {
display: inline-block;
vertical-align: middle;
}
/** CONTAINERS **/
.container {
float: left;
width: 300px;
}
.block {
margin-bottom: 25px;
background: #394264;
border-radius: 5px;
}
/******************************************** LEFT CONTAINER *****************************************/
.left-container {}
.menu-box {
height: 470px;
}
.menu-box .titular {
background: #11a8ab;
}
.menu-box-menu .icon {
display: inline-block;
vertical-align: top;
width: 28px;
margin-left: 20px;
margin-right: 15px;
}
.menu-box-number {
width: 140px;
line-height: 22px;
background: #50597b;
text-align: center;
color:white;
border-radius: 15px;
position: absolute;
top: 20px;
right: 15px;
-webkit-transition: all .3s;
transition: all .3s;
}
.menu-box-number2 {
width: 250px;
line-height: 100px;
background: #50597b;
text-align: center;
color:white;
border-radius: 15px;
position: absolute;
top: 10px;
right: 15px;
-webkit-transition: all .3s;
transition: all .3s;
}
.menu-box-number3 {
width: 90px;
line-height: 22px;
background: #50597b;
text-align: center;
color:white;
border-radius: 15px;
position: absolute;
top: 20px;
right: 15px;
-webkit-transition: all .3s;
transition: all .3s;
}
.menu-box-menu li{
height: 60px;
position: relative;
}

.menu-box-tab {
line-height: 60px;
padding-left:15px;
display: block;
border-bottom: 1px solid #1f253d;
-webkit-transition: background .2s;
transition: background .2s;
}
.menu-box-tab2 {
line-height: 60px;
padding-left:15px;
display: block;
border-bottom: 1px solid #1f253d;
-webkit-transition: background .2s;
transition: background .2s;
}







/************************************************** MIDDLE CONTAINER **********************************/
.middle-container {
margin: 0 25px;
}
.profile {
height: 410px;
}
.add-button .icon {
float: right;
line-height: 18px;
width: 23px;
border: 2px solid;
border-radius: 100%;
font-size: 18px;
text-align: center;
margin: 10px;
}

.user-name {
margin: 25px 0 16px;
text-align: center;
}
.profile-description {
width: 210px;
margin: 0 auto;
text-align: center;
}
.profile-options {
padding-top: 23px;
}
.profile-options li {
border-left: 1px solid #1f253d;
}
.profile-options p {
margin: 0;
}
.profile-options a {
display: block;
width: 90px;
line-height: 60px;
text-align: center;
-webkit-transition: background .3s;
transition: background .3s;
}

.profile-options .icon {
padding-right: 10px;
}
.profile-options .comments {
border-top: 4px solid #fcb150;
}
.profile-options .views {
border-top: 4px solid #11a8ab;
}
.profile-options .likes {
border-top: 4px solid #e64c65;
}





/********************************************* RIGHT CONTAINER ****************************************/












</style>
</head>
<body>

<div class="main-container">

<!-- HEADER -->


<div class="left-container container">
<div class="menu-box block" style="padding:20px"> <!-- PROFILE (MIDDLE-CONTAINER) -->

<div class="profile-picture big-profile-picture clear">
<img width="150px" alt="me tech iletisim logo" src="img_bg_1.png" >
</div>
<h1 class="user-name">Me Tech İletişim</h1>
<div class="profile-description">
<p class="scnd-font-color">Teknik Servis Takip Formu</p>
<p class="scnd-font-color">TEL: <a href="tel:00905396925773">00905396925773</a></p>
</div>

</div>



</div><div class="left-container container">
<div class="menu-box block"> <!-- MENU BOX (LEFT-CONTAINER) -->
<h2 class="titular">KİŞİSEL BİLGİLER</h2>
<ul class="menu-box-menu">
<li>
<p class="menu-box-tab" >Adı Soyadı</p><div class="menu-box-number"><? echo $sorgucek['adisoyadi']; ?> </div>
</li>
<li>
<p class="menu-box-tab" >Telefon</p><div class="menu-box-number"><? echo $sorgucek['telefonno']; ?></div>
</li>
<li>
<p class="menu-box-tab" >Müşteri Şikayeti</p><div class="menu-box-number"></div>
</li>
<li>
<p class="menu-box-tab2" ></p><div class="menu-box-number2"><? echo $sorgucek['sikayet']; ?></div>
</li>
<li>
<p class="menu-box-tab" ></p><div class="menu-box-number3"></div>
</li>
<li>
<p class="menu-box-tab" >Ücret</p><div class="menu-box-number3"><? echo $sorgucek['ucret']; ?></div>
</li>
<li>
<p class="menu-box-tab" >Ödeme Durumu</p><div class="menu-box-number3"><? echo $sorgucek['odemedurumu']; ?></div>
</li>

</ul>
</div>



</div>

<!-- RIGHT-CONTAINER -->
<div class="left-container container">
<div class="menu-box block"> <!-- MENU BOX (LEFT-CONTAINER) -->
<h2 class="titular">CİHAZ BİLGİLER</h2>
<ul class="menu-box-menu">
<li>
<p class="menu-box-tab" >İşlem No</p><div class="menu-box-number"><? echo $sorgucek['islemno']; ?></div>
</li>
<li>
<p class="menu-box-tab" >İşlem Durumu</p><div class="menu-box-number"><? echo $sorgucek['islemdurumu']; ?></div>
</li>
<li>
<p class="menu-box-tab" >Geliş Tarihi</p><div class="menu-box-number"><? echo $sorgucek['gelistarihi']; ?></div>
</li>
<li>
<p class="menu-box-tab" >Teslim Tarihi</p><div class="menu-box-number"><? echo $sorgucek['teslimtarihi']; ?></div>
</li>

<li>
<p class="menu-box-tab" >Cihaz Marka</p><div class="menu-box-number"><? echo $sorgucek['cihazmarka']; ?></div>
</li>

<li>
<p class="menu-box-tab" >Cihaz Model</p><div class="menu-box-number"><? echo $sorgucek['cihazmodel']; ?></div>
</li>
<li>
<p class="menu-box-tab" >IMEI No</p><div class="menu-box-number"><? echo $sorgucek['imei']; ?></div>
</li>



</ul>
</div>




</div> <!-- end right-container -->
</div> <!-- end main-container -->



<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>