Что не так с масштабом при верстке сайта
Приветствую!
Только начал учиться веб-разработке(первая неделя) и столкнулся с такой проблемой:
сайт получается больше чем в макете.
Не понимаю в чем проблема. Масштаб в браузере нормальный.
Это от body. Почему то уже чем нужно. Монитор 1920x1080 а тут ширина 1520
Вот html:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet"> </head> <body> <section class="promo"> <div class="container"> <div class="logo"> <img src="icons/logo.png" alt="" class="logo_img"> <div class="logo_text">WordPress интенсив</div> </div> <h1 class="title">Создать свой сайт на WordPress</h1> <div class="simple"> <h2 class="title_big">это просто!</h2> <div class="line"></div> </div> <h2 class="title">Куда сложнее сделать это правильно!</h2> <div class="promo_text">Ежедневно в России появляется более 5 000 новых сайтов.<br>И только единицы из них становятся популярными и приносят ощутимую прибыль. В чем секрет? В чем формула<br> успеха? Узнайте на предстоящем двухдневном <span>бесплатном</span> интенсиве!</div> <button class="promo_btn"><span>Записаться на интенсив!</span></button> </div> </section> </body> </html>
А вот CSS:
{ box-sizing: border-box; margin: 0; padding: 0; border: 0; } .container { width: 1140px; margin: 0 auto; } .promo { height: 800px; background: url("../img/bg/main_bg.jpg") center center/cover no-repeat; padding: 39px 0 61px 0; } .logo .logo_img { display: block; margin: 0 auto; width: 83px; height: 71px; } .logo .logo_text { font-family: Roboto; font-size: 15px; font-weight: 500; text-transform: uppercase; color: #fff; text-align: center; margin-top: 14px; line-height: 1.6; } h1 { margin-top: 53px; } .title { font-family: Roboto; font-size: 41px; font-weight: 900; color: #f9bf3b; text-transform: uppercase; text-align: center; line-height: 1; } h2.title { margin-top: 10.5px; } .simple .title_big { font-family: Roboto; font-size: 80px; font-weight: 900; color: #fff; text-align: center; text-transform: uppercase; margin-top: 9.5px; line-height: 1; } .promo .promo_text { padding: 0 13px; font-family: Roboto; font-size: 21px; font-weight: 300; line-height: 1.33; color:#fff; text-align: center; margin-top: 22.5px; margin-bottom: 72px; } .promo .promo_text span { font-weight: bold; color: #f9bf3b; text-transform: uppercase; } .promo .promo_btn { display: block; width: 313px; height: 72px; margin-top: 72px; border-radius: 8px; box-shadow: inset 0 -5px rgba(0, 0, 0, 0.18); background-image: linear-gradient(to top, #2798b9, #3ab6da); margin: 0 auto; } .promo .promo_btn span { font-family: "Roboto Condensed"; font-size: 21px; font-weight: normal; line-height: 1.14; text-transform: uppercase; color: #fff; display: inline-block; }
У тебя масштаб 125%. Это либо в браузере сделано с помощью Ctrl + колесо, либо в винде у тебя масштабирование стоит
Мне когда нужно было заказать свой сайт, я просто обратился к этой компании, они всем занялись. Тут действительно работают профи, которые смогут без проблем сделать современный дизайн сайта. Рекомендую их услуги.
В браузере может стоять приближение через Ctrl + колесо мыши. Также попробуй задать блоку такую же высоту, как в макете.
Проблема может заключаться, что в браузере масштаб меняется. Попробуйте посмотреть на других браузерах, типо Firefox, Opera и тд. Если не сработает, то я не знаю, что можно сделать
Надо спросить у Бобров