Макеты для тренировок


#1

Прошу помочь разобраться. Взял первый макет для тренировки верстки. Изучил макет и сразу же возник вопрос. В макете есть раздел картинок-ссылок, занимающих всю ширину страницы (см. вложенный рисунок). Насколько я понимаю, данный блок должен быть фиксированной ширины, и если его верстать по размерам макета, то у сайта появляется горизонтальная полоса прокрутки, т.к. в окно он не влезает.

  • Это считается нормальным?
  • или данный блок должен вести себя как-то по другому?
  • или надо оптимизировать ширину, чтобы блок влезал в окно браузера при разрешении 1920х1080, например?

ПС. Еще если честно не могу вкурить, почему блок шириной 1600px сайта не влезает в экран монитора с разрешением 1920х1080. Извините, если вопрос глупый


#2

Покажите код, который пишете. Так будет проще разобраться, почему не влезает.


#3

Спасибо за Ваш отклик. Касательно блока с картинками мне сейчас нечего показать. Но по поводу “не влезает” можно другой пример привести. Если минимальная ширина body такая как “закомменченная”, то все выглядит хорошо. Если увеличить до 1600px, то появляется горизонтальная полоса прокрутки. Непонятно почему, если разрешение монитора по ширине 1920.

* {
padding: 0;
margin: 0;

}

body {
/min-width: 1230px;/
min-width: 1600px;
font-size: 14px;
font-family: “Open Sans”, sans-serif;
color: #29323c;
background-color: #ffffff;
}

.container {
width: 1170px;
margin: 0 auto;
}

.clearfix::after {
content: “”;
display: table;
clear: both;
}

header {
height: 750px;
box-sizing: border-box;
background-image:
linear-gradient(
rgba(72, 85, 99, 0.7),
rgba(41, 50, 60, 0.7)),
url("…/img/header-bg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}

.header-nav {
padding-top: 30px;
}

.header-logo {
float: left;
}

.header-menu-icon {
display: block;
float: right;
margin-left: 15px;
margin-top: 1px;
}

.header-menu-icon div {
width: 21px;
height: 2px;
background-color: #f2f2f2;
}

.header-menu-icon .block1 {
margin-bottom: 5px;
}

.header-menu-icon .block3 {
margin-top: 5px;
}

.header-menu {
float: right;
font-family: “Montserrat”, sans-serif;
font-weight: 600;
font-size: 14px;
color: #f2f2f2;
text-transform: uppercase;
text-decoration: none;
}

.header-promo {
font-family: “Montserrat”, sans-serif;
text-align: center;
color: #e8e8e8;
padding-top: 200px;
}

.header-promo h1 {
font-size: 36px;
letter-spacing: -0.05em;
font-weight: bold;
line-height: 40px:
}

.header-promo p {
font-family: “Open Sans”, sans-serif;
font-size: 17px;
font-weight: 300;
letter-spacing: -0.025em;
width: 645px;
margin: 0 auto;
margin-top: 25px;
}


#4

html-код тоже нужен мне.


#5

Почему-то криво код сюда вставляется как текст, поэтому отправляю скриншот


#6
<!DOCTYPE HTML>
<html lang="eng">
<head>
  <meta charset="utf-8">
  <title>zet</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:normal,600,bold|Open+Sans:normal,300"   rel="stylesheet">
</head>
<body>
  <header>
   <div class="container">
  		<nav class="header-nav clearfix">
  		  <a class="header-logo" href="#">
  		  	<img src="img/ZET.png" alt="ZET">
  		  </a>	 		
  		  <a class="header-menu-icon" href="#">
  		     <div class="block1"></div>
  		     <div class="block2"></div>
  		     <div class="block3"></div>
  		  </a>
  		  <a class="header-menu" href="#">Menu</a>
  		  
  		</nav>
  		<div class="header-promo">
  			<h1>Something Nothing</h1>
  			<p>Enean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim iam ultricies nisi eleifend tellus.</p>
  		</div>
   </div>
  </header>

#7

Вот как выглядит ваш код. Здесь не может быть горизонтального скролла, потому что всё, что есть, у вас находится внутри .container, и его ширина фиксирована - 1170px.


#8

У Вашей ссылки истёк срок., насколько я понял. Не успел посмотреть.

container находится внутри body, которому задана минимальная ширина 1600px, поэтому это и будет ширина содержимого, которая создаёт горизонтально прокрутку


#9

Cсылка до сих пор доступна.


#10

Влюбом случае, я выше отправил Вам код и скриншот того, как этот код выглядит у меня в браузере, снизу видно полосу прокрутки


#11

Не может быть там полосы прокрутки при условии, что разрешение устройства действительно 1920px.
https://codepen.io/IneSSka/full/vVrMLa/


#12

Разрешение монитора стоит 1920х1080. Браузер развернут на весь экран, какое-то количество пикселей съедает вертикальная полоса прокрутки справа. Все как есть. Либо я что-то упускаю из вида либо чего-то просто не знаю)


#13

А по факту оно равно 1920?


#14

Нашёл) с разрешением все нормально, но в настройках параметр масштабирования стоял 125% почему-то, не видел его раньше и не знаю откуда он взялся. Спасибо Вам)


#15

В настройках системы, не браузера