Адаптация под разные устройства
сверстал сайт, версткой занимаюсь не так давно, на широких экранах выглядит довольно прилично, но вот с мобильными у меня проблема, не могу увеличить шапку сайта на весь экран, ей постоянно что-то мешает, но не могу понять что
Вот код:
.container {
max-width: 1200px;
}
@media (max-width:1200px) {
.container {
max-width: 970px;
}
}
@media (max-width:992px) {
.container {
max-width: 750px;
}
}
@media (max-width:767px) {
.container {
max-width: 500px;
}
.cont {
max-width: 700px;
}
}
@media (max-width:560px) {
.container {
max-width: 300px;
}
#cont {
max-width: 300px;
}
.cont {
max-width: 400px;
}
}
@media (max-width:390px) {
.container {
max-width: 250px;
}
.cont {
max-width: 420px;
}
}
#h5 {
color: #FFF;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
float: left;
padding: 15px;
}
td {
color: #007BFF;
font-family: "Roboto";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.date {
color: #000000;
font-family: "Roboto";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body style="overflow-x: hidden;">
<div class="cont" style="background: #343A40; height:56px; width:100%">
<h4 class="col-1" style="float:left; padding: 10px 50px; color: white">НЛК</h4>
<h5 id="h5">Портфолио</h5>
<h5 id="h5">Рейтинг</h5>
<h5 class="col-1" id="h5">Помощь</h5>
</div>
<div class="cont" style="float:left; width: 100%; height: 400px;background: #E9ECEF;padding: 0px 10px">
<h1 style="padding: 55px 55px 0px">Портфолио</h1>
<p style="padding: 0px 55px 0px 55px">Это место, где собраны ваши научные публикации. Здесь вы можете добавлять свои научные работы, получать информацию об их уникальности и смотреть отзывы ваших научных руководителей.</p>
<button type="submit" style="margin: 0px 55px; width: 201px;height: 48px;flex-shrink: 0; border-radius: 4px;background: #007BFF; color:aliceblue; border-color: #007BFF;">Добавить работу</button>
</div>
<div class="container" style="float:left">
<div class="container" style="float:left; width: 445px;height: 250px; margin: 50px 55px; border:1px solid rgba(165, 164, 164, 0.582);">
<div class="container" style="border:1px solid rgba(165, 164, 164, 0.582);background: rgba(192, 192, 192, 0.363);width: 445px;height: 48px;position:relative; left:-13.5px">
<p style="padding:15px 30px; color: #000;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;">Ваш профиль</p>
</div>
<h5 style="padding: 14px 20px;color: #000;
font-family: Roboto;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;">Сергей Павлович Фролов</h5>
<p style="padding: 0px 20px"><b>Научная степень</b>: Магистр.<br> <b>Специализация</b>: Инвестиционные проблемы экономически развивающихся рынков.</p>
<button type="submit" style="margin: 0px 20px; width: 140px;
height: 38px;border-radius: 4px;background: #007BFF;color: #FFF;font-family: Roboto;font-size: 16px;font-style: normal;font-weight: 400;line-height: normal;border-color: #007BFF;">Редактировать</button>
</div>
<div class="container" style="float:left; width: 445px;height: 250px; margin: 50px 55px; border:1px solid rgba(165, 164, 164, 0.582);">
<div class="container" style="border:1px solid rgba(165, 164, 164, 0.582);border-radius: 4px 4px 0px 0px;background: rgba(192, 192, 192, 0.363);width: 445px;height: 48px;position:relative; left:-13.5px">
<p style="padding:15px 30px; color: #000;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;">Статистика</p>
</div>
<p style="padding: 14px 20px;color: #000;
font-family: Roboto;
font-size: 16px;
font-style: normal;
line-height: normal;Line-height:30px"><b>На платформе</b>: 2 года.<br> <b>Добавлено работ</b>: 10.<br> <b>Средняя уникальность</b>: 75%.<br> <b>Языки работ</b>: русский, английский.</p>
</div>
</div>
<div style="float:left; margin: 0px 55px">
<table id="navbar" class="table table-bordered" style=" width:100%">
<tbody>
<tr>
<th>Название работы</th>
<th>Дата загрузки</th>
<th>Научный руководитель</th>
<th>Уникальность</th>
</tr>
<tr>
<td>Привлечение инвестиций как фактор развития экономики</td>
<td class="date">21.05.2019</td>
<td>Асаншоева А.М.</td>
<td>89%</td>
</tr>
<tr>
<td>The role of accounting in sustainable development</td>
<td class="date">11.02.2019</td>
<td>Шаляпина В.С.</td>
<td>78%</td>
</tr>
<tr>
<td>Сценарный анализ как инструмент учета рисков инвестиционного проекта
</td>
<td class="date">05.09.2018</td>
<td>Васильев М.Г.</td>
<td>67%</td>
</tr>
<tr>
<td>Глобальные и региональные инвестиционные тенденции</td>
<td class="date">09.07.2018</td>
<td>Асаншоева А.М.</td>
<td>73%</td>
</tr>
<tr>
<td>Systemic risks in financial markets</td>
<td class="date">18.05.2018</td>
<td>Леонидов В.Б.</td>
<td>77%</td>
</tr>
<tr>
<td>The influence of tax regulation liberalisation on the domestic debt market</td>
<td class="date">09.03.2018</td>
<td>Шаляпина В.С.</td>
<td>82%</td>
</tr>
<tr>
<td>Биткоин как новый вид инвестиций</td>
<td class="date">29.01.2018</td>
<td>Асаншоева А.М.</td>
<td>71%</td>
</tr>
<tr>
<td>Проблема воспроизводства жилищного фонда в России</td>
<td class="date">08.11.2017</td>
<td>Васильев М.Г.</td>
<td>65%</td>
</tr>
<tr>
<td>Влияние безработицы на экономику СНГ</td>
<td class="date">17.09.2017</td>
<td>Васильев М.Г.</td>
<td>68%</td>
</tr>
<tr>
<td>Мировой валютный рынок Форекс</td>
<td class="date">02.07.2017</td>
<td>Васильев М.Г.</td>
<td>67%</td>
</tr>
</tbody>
</table>
</div>
<div style="width: 100%;height: 51px; background:#6361612f; float:left; margin-top: 50px;">
<p style="padding:0px 55px; position:relative; top:15px; color: #6C757D;font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;">© Научный личный кабинет. Все права защищены</p>
</div>
</body>
</html>Источник: Stack Overflow на русском