Я разрабатываю веб-приложение, которое должно реагировать на все виды устройств [мобильные телефоны, вкладки и, конечно же, P c], так что сейчас я работаю над страницей профиля пользователя, которую я хочу страница должна быть отзывчивой, поэтому я использовал систему сетки для разделения страницы следующим образом: - Компьютер Код: -
<html>
<head><title></title>
<link rel="stylesheet" type="text/css" href="..\Styles\profile.css">
<link rel="stylesheet" type="text/css" href="..\Styles\nav-navbar.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card" style="width: 20rem; height:auto;">
<br>
<div class="row justify-content-md-center">
<img class="img-thumbnail" src="..\upload\tmp\32546861.jpg" style="width:14rem; height:12rem" alt="Avatar"></img>
<br>
<h2><a href="profile.php">Admin</a></h2>
</div>
<div class="row justify-content-md-center">
<div class="col-sm-9">
<svg class="octicon octicon-location" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6 0C2.69 0 0 2.5 0 5.5 0 10.02 6 16 6 16s6-5.98 6-10.5C12 2.5 9.31 0 6 0zm0 14.55C4.14 12.52 1 8.44 1 5.5 1 3.02 3.25 1 6 1c1.34 0 2.61.48 3.56 1.36.92.86 1.44 1.97 1.44 3.14 0 2.94-3.14 7.02-5 9.05zM8 5.5c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
<input type="submit" class="btn btn-success btn-sm btn-block" value="متابعة"></input>
<br>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div class="card ml-5" style="width:auto; height:auto;">
<ul class="nav nav-tabs nav-fill">
<li class="nav-item gu">
<a class="nav-link active" herf="#"> عن الشركة</a>
</li>
<li class="nav-item gu">
<a class="nav-link" herf="#">اخر الدرفتات<a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
хорошо, этот код работает быстро с [Компьютеры ] проблема в устройстве с небольшим экраном, страница не показывает способ, которым я хочу это снимок экрана: - android Устройство
я хочу, чтобы панель вкладок находилась в центр экрана и контент, который нужно адаптировать, а также [имя тега] под профилем pi c и изображение в центре экрана, которое я пытался выполнить sh что я хочу, но мне не удалось, я сделал каждый элемент карта в новом ряду и используется класс justify-content-md-center и изображение профиля, также я попытался отцентрировать его в середине экрана ....
CSS Файл (профиль. css) : - * 1 018 *
body{
/*background-image:url("images/2.png");*/
background-color:rgba(26, 26, 26, 0.3) !important;
background-repeat:repeat;
}
@font-face {
font-family: "hana";
src: url("../fonts/hana.ttf");
}
@font-face {
font-family: "spirt";
font-style: Bold;
src: url("../fonts/spirt.ttf");
}
/* nav items */
.gu{
font-family:hana;
}
/* Profile CSS Style Section */
.card h2{
font-family:hana;
}
.card input[type=submit]{
font-family:hana;
}
@media screen and (min-width: 320px) and (max-width: 480px) {
body {
}
.nav {
margin-left:auto;
float:left;
}
.col-md-9{
margin-left:auto;
float: left;
}
}
/* Profile CSS Section END */