Из за чего происходит такое смещение при уменьшении размера экрана?

Question

[Ruslan Website]

Это нормальный размер


Это уменьшенный экран


Демо
https://new.ruslan.website/icleaning/

Comments

[Антон Литвиненко]

С мобилки не видно но думаю там где-то заданная ширина в шапке.
Зы. Видно. 855px.

[Ankhena]

У вас и на десктопе есть горизонтальная прокрутка. Из-за того, что вы задали для body ширину 100% (зачем задали кстати?) и при этом забыли обнулить margin (тоже у body).

А на мобилке: сначала ширина шапки осталась фиксированной 855px, но если её уберете, то прокрутка тоже останется. Уже просто потому что элементы не влезают (вы забыли flex-wrap или как-то иначе перестроить элементы)

[Ruslan Website]

И как же мне сделать чтобы контентная часть была по центру шириной 855пкс? а при уменьшении экрана до любого размера оставалась на своем месте и уменьшалась вместе со всем сайтом? Убрать у всех элементов фиксированную ширину и задать всем max-width?

[Ruslan Website]

Ankhena, Например здесь https://new.ruslan.website/icleaning2/ я задал body min-width: 1200px; при уменьшении работает как мне и надо, но я так понял что при переходе на сайт с мобильного, его надо уменьшить вручную, изначально с мобильного он показывается в ширине 1200пкс, т.е. за пределами экрана (не говорите про адаптивность, это сделаю позже, сейчас мне надо понять этот момент), а мне надо чтобы контент в изначальном виде был на любом размере экрана, просто уменьшенный.

[Ankhena]

Ruslan Website, тогда вам нужен meta viewport с фикс шириной 1200, а не device-width

[Ruslan Website]

Ankhena, То же самое, если заходишь с телефона весь сайт в полном размере и не помещается в экран, сами проверьте https://new.ruslan.website/icleaning/ зайдите с телефона. Неужели это что то настолько сложное?

[Ankhena]

Ruslan Website,

Неужели это что то настолько сложное?

Да нет, простое, если сделать как написано выше.

Но лучше заняться адаптацией и я вижу, что у вас это неплохо получается.

[Ruslan Website]

Ankhena, Все что выше писали я делал, не помогает, а вы похоже сами не проверяли или невнимательно читали, забудьте, вы все наверное привыкли выполнять типовые задачи и не можете справиться с простейшей внештатной ситуацией где требуется хотя бы просто внимательное чтение. Я же писал "если заходишь с телефона весь сайт в полном размере и не помещается в экран", уверен никто это даже не проверил. Сайт я уже сделал под ширину смартфона с одним media, но если ее убрать то никто из вас не сможет решить проблему с изменением размера экрана, чтобы сайт весь (десктопная, полная версия) умещался в эти размеры.

[Ankhena]

Ruslan Website, Руслан, не забывайтесь, пожалуйста. Это ваша задача и справится не можете с ней вы. Не нужно путать q&a и фриланс. Это первое.

Второе: если у вас что-то не получается, нужно выложить ссылку. Я вам сказала, что нужно сделать. Возможно, вы и попробовали, но не показали, поэтому сложно сказать, что именно в пошло не так.

Сайт я уже сделал под ширину смартфона с одним media, но если ее убрать то никто из вас не сможет решить проблему с изменением размера экрана, чтобы сайт весь (десктопная, полная версия) умещался в эти размеры.

Какую ширину вы указывали в meta viewport, когда пробовали?

[Ruslan Website]

Ankhena,

если у вас что-то не получается, нужно выложить ссылку.

Разговор окончен, я выкладывал все ссылки. И с этой задачей я всегда пытался справиться сам, никого не просил сделать за меня.

[Ruslan Website]

Ankhena, Если бы вы внимательно читали, а не думали что все понимаете с полуслова вы бы увидели все ссылки, и сейчас можете посмотреть (они уже не работают) если опять не возомните себя супер экспертом который все видит лишь раз взглянув.

[Ankhena]

Ruslan Website, https://new.ruslan.website/icleaning2/ тут 404
https://new.ruslan.website/icleaning/ тут адаптивная

И так нет ответа на вопрос, что именно вы пробовали писать в meta viewport

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

Если вам не хочется, то можете нагуглить статью с хабра типа "meta viewport для неадаптивных сайтов". Точного названия не помню, уж несколько лет прошло.

[Ruslan Website]

Ankhena,
Ваш вопрос

тогда вам нужен meta viewport с фикс шириной 1200, а не device-width

Мой ответ (Сделал с фикс шириной 1200.)

Ankhena, То же самое, если заходишь с телефона весь сайт в полном размере и не помещается в экран, сами проверьте https://new.ruslan.website/icleaning/ зайдите с телефона. Неужели это что то настолько сложное?

На счет ссылок
Опять вы ленитесь читать, а я написал что ссылки уже нерабочие. Сначала вы сказали что ссылок вообще нет, теперь говорите что они не работают, даже забавно что вы это написали не прочитав внимательно опять

(они уже не работают)

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

Answer 1

[Nekio]

Уберите width у класса .container, и используйте max-width

Comments

[Ruslan Website]

Происходит тоже самое только при большем уменьшении

[Nekio]

Вот так выглядит на данный момент, если заменить width на max-width

[Ruslan Website]

QuayS1de, Уменьши по сильней и сделай скрин всего экрана

[Сергей delphinpro]

Ruslan Website, некоторые элементы не влазят по ширине. адаптируйте их.