Что делать сайт занимает половину экрана на компьютере, а нужно чтобы занимал весь?

CSS HTML PHP

1 ответ

&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt; &lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt; &lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;     &lt;meta charset="UTF-8"&gt;     &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;     &lt;meta name="viewport" content="width=device-width"&gt;     &lt;title&gt;Document&lt;/title&gt;     &lt;link rel="stylesheet" href="/css/style.css"&gt; &lt;/head&gt;

<!DOCTYPE html> <html lang="en"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Document</title> <link rel="stylesheet" href="/css/style.css"> </head>

spoiler

.container{     width: 1200px;     margin: 0 0 auto;     font-family: Roboto;     font-weight: 400;    display: flex;    flex-direction: column; }  .main-menu ul {     display: flex;     list-style: none;     margin: 0;     padding: 0; }  .main-menu li {     margin-right: 24px; }  .main-menu a {     text-decoration: none;     color: black;     font-size: 14px; }  .main-menu {     position: relative;     top: -470px;     margin-left: 120px; }  .menu ul {     display: flex;     list-style: none;     margin: 0;     padding: 0; }  .menu li {     margin-right: 24px; }  .menu a {     text-decoration: none;     color: black;     font-size: 14px; }  .menu {     position: relative;     top: -488px;     margin-left: 1023px; }  .sign {     color: white; }  .text1 {     font-size: 48px;     position: relative;     top: -430px;     margin-left: 150px; }  .images1 {     height: 295px;     width: 425px;     position: relative;     margin-left: 625px;     top: -670px; }  .search {     position: relative;     margin-left: 150px;     top: -740px; }  .lupa {     position: relative;     margin-left: 17px;     top: -40px; }  .circle {     position: relative;     margin-left: 376px;     top: -74px; }  .strela {     position: relative;     margin-left: 390px;     top: -106px; }  .shopping {     position: relative;     top: -630px;     margin-left: 258px; }  .text2 {     position: absolute;     font-size: 16px;     text-align: center;     margin-left: -100px; }  .card {     position: relative;     margin-left: 570px;     top: -680px; }  .text3 {     position: absolute;     font-size: 16px;     text-align: center;     margin-left: -90px; }  .bank {     position: relative;     margin-left: 892px;     top: -730px; }  .text4 {     position: absolute;     font-size: 16px;     text-align: center;     margin-left: -90px; }  .text5 {     font-size: 32px;     text-align: center;     position: relative;     top: -560px; }  .text6 {     font-size: 16px;      }  .img1 {     position: relative;     margin-left: 150px;     top: -520px; }  .text7 {     font-size: 16px; }  .img2 {     position: relative;     margin-left: 467px;     top: -1000px; }  .text8 {     font-size: 16px; }  .img3 {     position: relative;     margin-left: 783px;     top: -1480px; }  .strelka {     position: relative;     margin-left: 100px ;     top: -34px; }  .text9 {     color:#487B94;     position: relative;     margin-left: 150px;     top: -1410px; }  .text10 {     color:#487B94;     position: relative;     margin-left: 467px;     top: -1484px; }  .text11 {     color:#487B94;     position: relative;     margin-left: 315px;     top: -74px; }  .text12 {     font-size: 20px;     position: relative;     top: -1500px;     margin-left: 150px; }  .img4 {     position: relative;     margin-left: 150px;     top: -1450px;  }  .text13 {     font-size: 16px; }  .text14 {     font-size: 16px; }  .img5 {     position: relative;     margin-left: 626px;     top: -1822px; }  .text15 {     font-size: 16px; }  .img6 {     position: relative;     margin-left: 1101px;     top: -2193px; }  .strelka2 {     position: relative;     margin-left: 120px;     top: -33px; }  .view {     position: relative;     color:#487B94;     top: -2100px;     margin-left: 150px; }  .klarna {     margin-left: 150px;     font-size: 12px;     position: relative;     top: -2120px; }  .bg2 {     position: relative;     top: -2080px; }  .text16 {     margin-left: 150px;     font-size: 16px;     position: relative;     top: -2560px;     color: white; }  .text17 {     font-size: 48px;     color: white;     margin-left: 150px;     color: white;     position: relative;     top: -2585px; }  .text18 {     font-size: 20px;     margin-left: 150px;     color: white;     position: relative;     top: -2600px; }  .learn-more {     width: 135px;     height: 52px;     background: #FFB3C7;     border-radius: 0px;     position: relative;     margin-left: 150px;     top: -2590px; }  .klarna-card-img {     margin-left: 625px;     position: relative;     top: -2995px; }  .text19 {     margin-left: 625px;     color: black;     font-size: 48px;     position: relative;     top: -2800px; }  .text20 {     margin-left: 625px;     color: black;     font-size: 20px;     position: relative;     top: -2800px; }  .discover-trends {     width: 166px;     height: 50px;     background: #17120F;     border: 1px solid #17120F;     border-radius: 0px;     color: white;     margin-left: 625px;     position: relative;     top: -2780px; }  .inspired-img {     margin-left: 150px;     position: relative;     top: -3120px; }  .roses {     margin-left: 150px; }  .text21 {     margin-left: 167px;     font-size: 16px; }  .flowers {     position: relative;     top: -3000px; }  .active-wear {     margin-left: 468px; }  .text22 {     margin-left: 484px; }  .activewear {     position: relative;     top: -3386px; }  .affordable-tech {     margin-left: 784px; }  .text23 {     margin-left: 800px; }  .affordabletech {     position: relative;     top: -3773px; }  .shape-wear {     margin-left: 150px; }  .text24 {     margin-left: 167px; }  .shapewear {     position: relative;     top: -3700px; }  .running-gear {     margin-left: 468px; }  .text25 {     margin-left: 484px; }  .runninggear {     position: relative;     top: -4086px; }  .jewelry-img {     margin-left: 784px; }  .text26 {     margin-left: 800px; }  .jewelry {     position: relative;     top: -4470px; }  .dresses-img {     margin-left: 150px; }  .text27 {     margin-left: 167px; }  .dresses {     position: relative;     top: -4400px; }  .out-wear {     margin-left: 468px; }  .text28 {     margin-left: 484px; }  .outwear {     position: relative;     top: -4785px; }  .paw-some {     margin-left: 784px; }  .text29 {     margin-left: 800px; }  .pawsome {     position: relative;     top: -5170px; }

.container{ width: 1200px; margin: 0 0 auto; font-family: Roboto; font-weight: 400; display: flex; flex-direction: column; } .main-menu ul { display: flex; list-style: none; margin: 0; padding: 0; } .main-menu li { margin-right: 24px; } .main-menu a { text-decoration: none; color: black; font-size: 14px; } .main-menu { position: relative; top: -470px; margin-left: 120px; } .menu ul { display: flex; list-style: none; margin: 0; padding: 0; } .menu li { margin-right: 24px; } .menu a { text-decoration: none; color: black; font-size: 14px; } .menu { position: relative; top: -488px; margin-left: 1023px; } .sign { color: white; } .text1 { font-size: 48px; position: relative; top: -430px; margin-left: 150px; } .images1 { height: 295px; width: 425px; position: relative; margin-left: 625px; top: -670px; } .search { position: relative; margin-left: 150px; top: -740px; } .lupa { position: relative; margin-left: 17px; top: -40px; } .circle { position: relative; margin-left: 376px; top: -74px; } .strela { position: relative; margin-left: 390px; top: -106px; } .shopping { position: relative; top: -630px; margin-left: 258px; } .text2 { position: absolute; font-size: 16px; text-align: center; margin-left: -100px; } .card { position: relative; margin-left: 570px; top: -680px; } .text3 { position: absolute; font-size: 16px; text-align: center; margin-left: -90px; } .bank { position: relative; margin-left: 892px; top: -730px; } .text4 { position: absolute; font-size: 16px; text-align: center; margin-left: -90px; } .text5 { font-size: 32px; text-align: center; position: relative; top: -560px; } .text6 { font-size: 16px; } .img1 { position: relative; margin-left: 150px; top: -520px; } .text7 { font-size: 16px; } .img2 { position: relative; margin-left: 467px; top: -1000px; } .text8 { font-size: 16px; } .img3 { position: relative; margin-left: 783px; top: -1480px; } .strelka { position: relative; margin-left: 100px ; top: -34px; } .text9 { color:#487B94; position: relative; margin-left: 150px; top: -1410px; } .text10 { color:#487B94; position: relative; margin-left: 467px; top: -1484px; } .text11 { color:#487B94; position: relative; margin-left: 315px; top: -74px; } .text12 { font-size: 20px; position: relative; top: -1500px; margin-left: 150px; } .img4 { position: relative; margin-left: 150px; top: -1450px; } .text13 { font-size: 16px; } .text14 { font-size: 16px; } .img5 { position: relative; margin-left: 626px; top: -1822px; } .text15 { font-size: 16px; } .img6 { position: relative; margin-left: 1101px; top: -2193px; } .strelka2 { position: relative; margin-left: 120px; top: -33px; } .view { position: relative; color:#487B94; top: -2100px; margin-left: 150px; } .klarna { margin-left: 150px; font-size: 12px; position: relative; top: -2120px; } .bg2 { position: relative; top: -2080px; } .text16 { margin-left: 150px; font-size: 16px; position: relative; top: -2560px; color: white; } .text17 { font-size: 48px; color: white; margin-left: 150px; color: white; position: relative; top: -2585px; } .text18 { font-size: 20px; margin-left: 150px; color: white; position: relative; top: -2600px; } .learn-more { width: 135px; height: 52px; background: #FFB3C7; border-radius: 0px; position: relative; margin-left: 150px; top: -2590px; } .klarna-card-img { margin-left: 625px; position: relative; top: -2995px; } .text19 { margin-left: 625px; color: black; font-size: 48px; position: relative; top: -2800px; } .text20 { margin-left: 625px; color: black; font-size: 20px; position: relative; top: -2800px; } .discover-trends { width: 166px; height: 50px; background: #17120F; border: 1px solid #17120F; border-radius: 0px; color: white; margin-left: 625px; position: relative; top: -2780px; } .inspired-img { margin-left: 150px; position: relative; top: -3120px; } .roses { margin-left: 150px; } .text21 { margin-left: 167px; font-size: 16px; } .flowers { position: relative; top: -3000px; } .active-wear { margin-left: 468px; } .text22 { margin-left: 484px; } .activewear { position: relative; top: -3386px; } .affordable-tech { margin-left: 784px; } .text23 { margin-left: 800px; } .affordabletech { position: relative; top: -3773px; } .shape-wear { margin-left: 150px; } .text24 { margin-left: 167px; } .shapewear { position: relative; top: -3700px; } .running-gear { margin-left: 468px; } .text25 { margin-left: 484px; } .runninggear { position: relative; top: -4086px; } .jewelry-img { margin-left: 784px; } .text26 { margin-left: 800px; } .jewelry { position: relative; top: -4470px; } .dresses-img { margin-left: 150px; } .text27 { margin-left: 167px; } .dresses { position: relative; top: -4400px; } .out-wear { margin-left: 468px; } .text28 { margin-left: 484px; } .outwear { position: relative; top: -4785px; } .paw-some { margin-left: 784px; } .text29 { margin-left: 800px; } .pawsome { position: relative; top: -5170px; }

Дополнительно:

Нужно делать сайт размером с весь значит)

как он может быть на всю ширину если написано ширина 1200
и после этого неверно написано центрование
а дальше написана какаято жесть, типа

.pawsome {     position: relative;     top: -5170px; }

.pawsome { position: relative; top: -5170px; }

это стили из фигмы или чегото подобного?

Антон Литвиненко, Можешь подсказать, как центрование исправить хотя бы?

admiralov, что значит исправить центрирование ?

Роман Страх,

admiralov, залей в песочничу свой сайт и дай ссылку на него

admiralov,

.container {   max-width: 1200px;   margin: 0 auto; }

.container { max-width: 1200px; margin: 0 auto; }

Ответы:

1200 уже задали
откажитесь от px

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Ирина WP Ответ

Для того чтобы сайт занимал весь экран на компьютере, можно использовать следующие способы:

1. Изменить масштаб страницы: нажмите комбинацию клавиш Ctrl и «+» (или «-») для увеличения (или уменьшения) масштаба сайта. Это позволит увеличить размер сайта так, чтобы он занимал весь экран.

2. Изменить разрешение экрана: перейдите в настройки дисплея и установите разрешение экрана на максимальное. Это позволит увеличить размер отображаемой области и заполнить весь экран.

3. Использовать полноэкранный режим: многие браузеры поддерживают полноэкранный режим, который позволяет отображать сайт на весь экран. Нажмите клавишу F11 для активации полноэкранного режима.

4. Изменить CSS стили сайта: если у вас есть навыки веб-разработки, вы можете изменить CSS стили сайта, чтобы он занимал весь экран. Для этого добавьте следующий код в файл CSS сайта:

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

body { width: 100%; height: 100vh; margin: 0; padding: 0; }

Эти способы помогут сайту занимать весь экран на компьютере и обеспечат комфортное использование сайта.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Искусственный интеллект Что делать, если OpenRouter ограничивает доступ к моделям? 1 ответ

Что делать сайт занимает половину экрана на компьютере, а нужно чтобы занимал весь?

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно