Когда я меняю размеры страницы, то некоторые элементы съезжают, как исправить?

Question

[IninsaY]

https://codepen.io/IninsayY/pen/vYYeopN

Comments

[Валерий Витальевич]

А как Вы видите что в свёрнутом виде они съезжают?

[origami1024]

ОП, код в подобных вопросах лучше сразу через codepen давай. Чем легче отвечающему сразу въехать в эксперименты, тем у тебя будет больше ответов.

[IninsaY]

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

[IninsaY]

origami1024, https://codepen.io/IninsayY/pen/vYYeopN
Буду знать

[Rustam Bainazarov]

Потому что вёрстка плохая.

[IninsaY]

Рустам Байназаров, а как сделать "хорошую"?

[Rustam Bainazarov]

IninsaY, слишком много аспектов стоит осветить, начиная с выравнивания и центрирования в px и всё такое прочее.

Откройте любой сайт с похожими элементами и посмотрите, как это сделано там. Ну или курсы, не думаю, что вы сейчас делаете по курсам задание, ибо так никто не учит.

[Ankhena]

IninsaY, съезжают - потому что не помещаются.
Вы хотите резину, а верстаете отступами и их размеры задаете гигантскими и в пикселях.

Задавайте элементам фоны|тени|рамочки и смотрите как они себя ведут.
В верстке ничего такого волшебного нету, обычная геометрия.

[Валерий Витальевич]

IninsaY, нужна адаптация. Можете использовать бутстрап, как более быстрое решение. Но в любом случае нужно учить. Могу помочь с вёрсткой, бесплатно)

[IninsaY]

Валерий Витальевич, было бы очень круто, как с вами можно связаться?

[Валерий Витальевич]

IninsaY, voytek.com.ua @ gmail.com напишите мне на почту

Answer 1

[origami1024]

Отвечая на вскидку - многим элементам ты задаешь расположение через margin-left margin-right, при этом в абсолютных единицах, тоесть px - пикселях.
Чтобы хорошо сделать нужно вникнуть в адаптивный/респонсивный дизайн и заранее планировать, где будет флекс контейнер с вложенными блоками (с автоматическим выравниванием по заданным правилам), где будут размеры заданы в процентах либо других относительных единицах, где будет медиазапрос, который скрывает элемент или перемещает его на определенных расширениях экрана.

Comments

[IninsaY]

можешь показать на 1 блоке как нужно правильно?

[origami1024]

IninsaY, Найди туториал по флексам, это будет хорошая база.

можешь показать на 1 блоке как нужно правильно?

Верхние два блока объединил под один див-контейнер header, задал ему флекс правила выравнивания

Вместо

<div class="b2">
  <p class="t2"><i>b</i>anx</p>
</div>
<div class="b1">
  <p class="t1"><span>DESIGN</span><span>WEB DESIGN</span> <span>GRAPHIC DESIGN</span> <span>PRINT DESIGN</span> <span>VIDEO DESIGN</span></p>
</div>

Вот это

<div class="header">
  <p class="t2"><i>b</i>anx</p>
  <p class="t1">
    <span>DESIGN</span><span>WEB DESIGN</span> <span>GRAPHIC DESIGN</span> <span>PRINT DESIGN</span> <span>VIDEO DESIGN</span>
  </p>
</div>

.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.t1 {
	color: #4D4E67;
	font-family: Rounds;
	font-size: 14px;
	font-weight: 800;
  margin: 0;
}
.t2 {
	color: #4D4E67;
	font-family: Rounds;
	font-size: 30px;
	font-weight: 800;	
  padding-right: 20px;
}

https://codepen.io/origami1024/pen/eYYeOYo

[IninsaY]

origami1024, ох, большое спасибо, ты меня сегодня прям выручил)