Почему шапка и все ее содержимое при масштабировании слетает?

Question

[loozmax]

Можно ли как-то сделать, чтобы при изменении ширины страницы элементы не сливались, чтобы был какой-то отступ или типа того? И нужно ли для этого у всех элементов в шапке делать ширину в процентах? Я про кнопки, input и прочее.

https://jsfiddle.net/sb67ev3L/1/

Comments

[Rustam Bainazarov]

Да, нужно делать в процентах. Заодно использовать max-width для пиксельных значения и т. д.

Основы адаптивного дизайна.

[loozmax]

Рустам Байназаров, то есть для кнопок например надо max-width?

[Rustam Bainazarov]

loozmax, не знаю. Вы сами решайте, что должно тянуться и до каких значений.

[loozmax]

Рустам Байназаров, А если например какой-то элемент не должен тянуться вообще. Так не прокатит?

[Rustam Bainazarov]

loozmax, прокатит, почему нет. Ставьте ширину в пикселях и все дела.

Answer 1

[fourthMAN]

Сделал думаю похожее что ты просил ( Код css ниже, просто вставь его )
Советую больше уделить вниманию самому css, будет меньше вопросов.
- Наследование
- Каскадность
- размеры min и max
- media запросам
Да и пиши стили в хронологическом порядке,
По типу
боди > div > и так далее сверху вниз стили.
Ещё есть классный видос по ошибкам новичков.
https://www.youtube.com/watch?v=y-odQFdFxdU
и по box-sizing
https://www.youtube.com/watch?v=IH_V0duSGLo

.wrapper {
max-width:1260px;
margin:0 auto;
height:auto;
}

header {
min-height:72px;
width:100%;
background: #FFFFFF;
box-shadow: 0 1px 28px rgba(0, 0, 0, 0.25);
}

header .wrapper ul {
display: flex;
justify-content: space-around;
line-height: 72px;
}

.sign-in,
.search {
font-size:16px;
}

.search {
color: #767;
min-width: 350px;
max-width: 100%;
height: 40px;
background: #EDEDED;
border-radius: 70px;
border:1px solid #EDEDED;
text-align:center;
outline:none;
}

a {
text-decoration: none;
}

.sign-in a {
color:#000;
display:block;
background: rgba(255, 255, 255, 0.4);
border: 2px solid #EDEDED;
width:94px;
height:40px;
border-radius: 22px;
margin:12px auto;
line-height:36px;
text-align: center;
}

.sign-in a:hover {
background: #EDEDED;
}

.sign-in a:active {
background: #E3E3E3;
}

.search:active,
.search:focus {
text-align: center;
text-indent:40px;
}

a .pic-logo {
position:relative;
top:5px;
left:10px;
}

ul {
padding:0;
margin:0;
list-style:none;
}

body {
margin:0;
font-family: Open Sans;
background:rgba(50,60,70,.7);
}

media (max-width:1200px) {
.wrapper {
max-width:1024px;
}
}

media (max-width:1023px) {
.wrapper {
max-width:768px;
}
}

/* media (max-width:767px) {
.wrapper {
max-width:420px;
}
} */

media (max-width:629px) {
.wrapper ul {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
.pic-logo {
padding-right: 10px;
}
media (max-width:419px) {
.wrapper {
max-width:340px;
}
}

media (max-width:339px) {
.wrapper {
max-width:none;
}
}

Comments

[loozmax]

Спасибооо!! И отдельное спасибо за ссылки.