Как сделать, чтобы сайт везде открывался в полном масштабе? То есть ширина всегда одна, но в зависимости от экрана сайт открывался по высоте
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" content='width=1900' />
<link rel="stylesheet" href="assets/css/reset.css">
<link rel ="stylesheet" href="assets/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="assets/images/favicon.ico">
<title>Труботорг</title>
</head>
<body>
<div class="header">
<div class="name">
<h1>ТРУБОТОРГ</h1>
</div>
<a href="assets/download/price_trubotorg32.pdf" download="price_trubotorg32" class="button7">Скачать прайс</a>
</div>
<div class="main-wrapper">
<div class="main-photo"> </div>
<div class="wrapper">
<h2 align="center" style="font-family: 'Orelega One', cursive;">ООО "ДИЛАР"</h2>
<p class="leftstr">Юридический адрес организации:</p>
<p class="rightstr" style="text-align: left;">Россия, Брянская обл, г Брянск, ул Орловская, 30, 47</p>
<p class="leftstr">ИНН:</p>
<p class="rightstr" style="text-align: left;">3255053340</p>
<p class="leftstr">ОГРН:</p>
<p class="rightstr" style="text-align: left;">1063255031377</p>
<p class="leftstr">КПП:</p>
<p class="rightstr" style="text-align: left;">325701001</p>
<p class="leftstr">Расчетный счет:</p>
<p class="rightstr" style="text-align: left;">40702810610000305201</p>
<p class="leftstr">Банк:</p>
<p class="rightstr" style="text-align: left;">АО "ТИНЬКОФФ БАНК"</p>
<p class="leftstr">Юридический адрес банка:</p>
<p class="rightstr" style="text-align: left;">Москва, 123060, 1-й Волоколамский проезд, д 10, стр 1</p>
<p class="leftstr">Корр.счет банка:</p>
<p class="rightstr" style="text-align: left;">30101810145250000974</p>
<p class="leftstr">ИНН банка:</p>
<p class="rightstr" style="text-align: left;">7710140679</p>
<p class="leftstr">БИК банка:</p>
<p class="rightstr" style="text-align: left;">044525974</p>
<div style="clear: left"></div>
</div>
</div>
<div class="contacts">
<h2 style="border-bottom: 0px; font-size: 50px; padding-top: 20px; color: aliceblue;" align="center">Контакты</h2>
<div class="address">
<h3 align="center" style="margin-left: 20px; margin-top: 50px;">Адрес</h3>
<p style="font-size: 24px; margin-top: 30px; color: #7EBFFF;">Склад</p>
<p style="font-size: 24px; color: #7EBFFF;">г.Брянск пос.Октябрьский</p>
<p style="font-size: 24px; color: #7EBFFF;">ул.Шоссейная 6</p>
</div>
<div class="time" align="center">
<h3 style="margin-top: 50px;">Время работы</h3>
<p style="font-size: 24px; margin-top: 30px; color: #7EBFFF;">Пн—Пт: 9:00—17:00</p>
</div>
<div class="phone" align="center">
<h3 style="margin-top: 50px;">8 (4832) 78-29-54</h3>
<h3>78-30-91</h3>
<p style="font-size: 24px; margin-top: 30px; color: #7EBFFF;">[email protected]</p>
<p style="font-size: 24px; color: #7EBFFF;">[email protected]</p>
</div>
</div>
<div class="footer" align="center" style="line-height: 50px; vertical-align: middle; font-size: 14px;">
<p>Copyright © 2021. ТРУБОТОРГ.</p>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Orelega+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
body {
position: relative;
font-family: 'Orelega One', cursive;
/*background: url(../images/background.jpg);
padding: 100px 0;*/
background: #f4f4f4;
min-width: 1900px;
height: 100%;
margin 0 auto;
}
/*.container {
width: 1200px;
height: auto;
margin: 0 auto;
}*/
.header {
position: relative;
width: inherit;
height: 96px;
background: white;
line-height: 96px;
vertical-align: middle;
}
.name {
position: absolute;
left: 20%;
top: 25px;
width: 240px;
height: 42px;
line-height: 42px;
vertical-align: middle;
font-size: 42px;
border-bottom: 2px solid red;
border-top: 2px solid red;
}
a.button7 {
line-height: 42px;
margin-left: 70%;
top: 25px;
vertical-align: middle;
font-weight: 500;
font-size: 20px;
color: white;
text-decoration: none;
padding: .8em 1em calc(.8em + 1px);
border-radius: 3px;
background: rgb(64,199,129);
box-shadow: 0 -3px rgb(53,167,110) inset;
transition: 0.2s;
}
a.button7:hover {
background: rgb(53, 167, 110);
}
a.button7:active {
background: rgb(33,147,90);
box-shadow: 0 3px rgb(33,147,90) inset;
}
.main-wrapper {
position: relative;
width: auto;
margin 0 auto;
}
.main-photo {
position: absolute;
width: 100%;
height: 360px;
filter: blur(2px);
box-shadow:0 0 0 400px rgba(0, 0, 0, 0.40) inset;
background: url("../images/intro-image.jpg") center no-repeat;
-webkit-background-size: cover;
background-size: cover;
top: 0;
}
h2 {
font-size: 30px;
line-height: 50px;
border-bottom: 3px solid #9EC1D4;
}
.wrapper {
position: absolute;
width: auto;
height: auto;
top: 180px;
left: 25%;
right: 25%;
border-radius: 10px;
background: white;
box-shadow: -40px 30px 30px -1px rgba(0,0,0,0.3);
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 50px;
padding: 10px;
}
.leftstr, .rightstr {
float: left; /* Обтекание справа */
width: 50%; /* Ширина текстового блока */
border-bottom: dotted 3px #9EC1D4;
color: #626262;
}
.rightstr {
text-align: right; /* Выравнивание по правому краю */
color: black;
}
.contacts {
position: relative;
background: #148bff;
top: 1000px;
height: 300px;
width: 100%;
}
.address {
position: absolute;
color:aliceblue;
font-size: 35px;
float:left;
left: 20%;
}
.time {
position: absolute;
color: aliceblue;
font-size: 35px;
left: 44%;
}
.phone {
position: absolute;
color: aliceblue;
font-size: 35px;
float: right;
right: 20%;
}
.footer {
position: relative;
background: black;
font-family: 'Open Sans', sans-serif;
color: aliceblue;
top: 1200px;
height: 50px;
width: auto;
}
Ответы (2 шт):
Автор решения: Vsevolod
→ Ссылка
Т.е, ты хочешь чтобы твой сайт выглядел нормально на всех устройствах? Тогда тебе нужно изучить метод css flexbox. Можешь прочитать здесь что тебе нужно, я на своем найте использовал
.flex{
display: flex;
width: 100%;
flex-flow: wrap;
justify-content: center;
align-items: center;
к div-ам, для того, что если маленький экран все они переносились на следующую строку и влезали
Автор решения: Ansel One
→ Ссылка
Попробуй в head задать такой тег мета
<meta name="viewport" content="width=ширина контейнера(без пикселей)">
Но при этом, у тебя должна быть задана фиксированная ширина контейнера. Не знаю хороший это способ или нет, но думаю это то, что тебе нужно.