Почему при уменьшении окна браузера сбивается вёрстка и как это исправить?

Question

[relows]

Нужно сверстать 5 колонок (без адаптации под мобильные устройства):


Вроде у меня получилось, но при уменьшении окна браузера всё сбивается:


А при уменьшении окна в браузере всё нормально:


Там явно применяются какие-то медиа запросы, но я поставил минимальную ширину страницы 1201 пиксель (в бутстрапе медиа запросы не более 1200 пикселей, насколько мне известно), мне нужно, чтобы при уменьшении страницы просто появлялся скролл снизу, и ничто не менялось на странице.

<div class="container mb40">
		<div class="row justify-content-between mb30">
			<div class="col-auto"><h3>ПОПУЛЯРНЫЕ МОДЕЛИ НЕМАН</h3></div>
			<div class="col-auto"><h5>СМОТРЕТЬ ВСЕ МОДЕЛИ</h5></div>
		</div>
		<div class="row">

			<div class="col">
				<div class="object_popular">
					<b>Дверь НЕМАН Н-102</b>
					<div class="row">
						<div class="col-6"><img src="img1/n21.jpg" alt="" class="auto"></div>
						<div class="col-6 info">
						
								<div class="data"><b>2 класс</b><br />безопасности
									<img src="img1/micro.png" alt="">
								</div>
								<div class="price"><b>66 000р</b></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="object_popular">
					<b>Дверь НЕМАН Н-102</b>
					<div class="row">
						<div class="col-6"><img src="img1/n21.jpg" alt="" class="auto"></div>
						<div class="col-6 info">
						
								<div class="data"><b>2 класс</b><br />безопасности
									<img src="img1/micro.png" alt="">
								</div>
								<div class="price"><b>66 000р</b></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="object_popular">
					<b>Дверь НЕМАН Н-102</b>
					<div class="row">
						<div class="col-6"><img src="img1/n21.jpg" alt="" class="auto"></div>
						<div class="col-6 info">
						
								<div class="data"><b>2 класс</b><br />безопасности
									<img src="img1/micro.png" alt="">
								</div>
								<div class="price"><b>66 000р</b></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="object_popular">
					<b>Дверь НЕМАН Н-102</b>
					<div class="row">
						<div class="col-6"><img src="img1/n21.jpg" alt="" class="auto"></div>
						<div class="col-6 info">
						
								<div class="data"><b>2 класс</b><br />безопасности
									<img src="img1/micro.png" alt="">
								</div>
								<div class="price"><b>66 000р</b></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="object_popular">
					<b>Дверь НЕМАН Н-102</b>
					<div class="row">
						<div class="col-6"><img src="img1/n21.jpg" alt="" class="auto"></div>
						<div class="col-6 info">
						
								<div class="data"><b>2 класс</b><br />безопасности
									<img src="img1/micro.png" alt="">
								</div>
								<div class="price"><b>66 000р</b></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

.object_popular {
	font-size: 15.2px;
	padding: 5% 10%;
	text-align: center;
	border: 1px solid #153557;
}

.object_popular>.row {
	margin-top: 5%;
}
.object_popular>.row>.info>.data>img {
	max-width: 100%;
	height: auto;
}

Answer 1

[Сергей Бут]

Вопрос на 10 из 10 . Ни кода, ни ясности требований....
Что "все сбивается"?
Какую версию Bootstrap используете? Какие префиксы класов?
Да и в конце концов, может все атки дело в масштабируемости отображения - при открытии в окне, а не на полный экран?

Comments

[relows]

Там явно применяются какие то медиа запросы, но я поставил минимальную ширину страницы 1201 пиксель(в бутстрапе медиа запросы не более 1200 пикселей, насколько мне известно), мне нужно чтобы при уменьшении страницы просто появлялся скролл снизу, и ничто не менялось на странице.

[Сергей Бут]

лол, что?
1. А префикс "xl-" для кого? (если это 4й бутстрап)
2. >Используешь "px" - говорим об адаптивности...
3. Скролл появляется исключительно из-за того,что какой то обьект вылезвет за контейнер (я думаю что раз ты уже бутстрапишь то и с инспектором знаком)

[relows]

Сергей Бут, Я ужасно разбираюсь во всём, просто верстаю сайты, параллельно учусь, смотря видео в youtube и задавая вопросы в тостере.

[relows]

Сергей Бут, А что за инспектор?)

[Сергей Бут]

relows, судьба у нас одинаковая...Инспектор кода - это то ,что вылезает когда жмешь F12 в браузере (ну или на сайте - ПКМ - "проверить" )

[Сергей Бут]

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

[relows]

Сергей Бут, Про это я знаю, я не понимаю почему объект container становится меньше чем 1200 пиксель, хотя ему задал min-width: 1201px; и media запоросы для него отключил.

[relows]

Сергей Бут, Кстати, спасибо, было интересно узнать название этого "инспектора кода"

[Сергей Бут]

кинь файлами

[relows]

Сергей Бут, https://yadi.sk/d/e9__c9P_GP7gRQ

[Сергей Бут]

Я тут пару раз прочитал и так и не понял, что именно ты хочешь, но на всякий случай скажу, что текст и будет сьежать пока там размер в px, либо em либо rem. Ну и ничего не вылезает

[Сергей Бут]

Если хочешь чтобы текст над синими квадратиками по ширине был точно такой же как и те 4 квадратика - оба блока в один контейнер, ширина которого равна ширине блока с квадратиками

[relows]

Сергей Бут, Мне нужно чтобы страница не становилась меньше 1200 пикселей. Когда я уменьшаю окно браузера, то окно становится меньше 1200px, либо это контейнер меняет ширину, но я отключил медиа запросы и поставил фиксированную ширину, это не помогло, что то из двух меняет ширину.

[relows]

Сергей Бут, Да, это точно с контейнером что то не то, я сейчас поставил ему min-width 9999px, ничего не изменилось.

[Сергей Бут]

если задать.container {min-width:1200px} все работает правильно - окно сделать меньше можно в любом случаи, но страница (область с классом container ) меньше 1200 не станет - и из-за разницы ширины окна и самой страницы появится скролл, и удали этот <meta> где 1201px. А так -это уже bootstrap приколы масштабируемости самих col-, также можешь попробывать *{overflow:hidden}

[tyzberd]

relows,

я не понимаю почему объект container становится меньше чем 1200 пиксель, хотя ему задал min-width: 1201px;

https://www.google.com.ua/search?q=%D0%B2%D0%B5%D1...

[tyzberd]

Сергей Бут,
*{overflow:hidden} )) правильно, любой скролл уберём, даже у страницы. Не делайте так.

[relows]

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

Answer 2

[tyzberd]

сколько у вас прописанно в meta viewport? так думаю, что у вас там фикс значение. При уменьшении окна браузера это значение не учитывается. Вам нужно перебыть размеры для container, сделать его фиксированным.

Comments

[relows]

<meta name="viewport" content="width=1201" />
Сейчас попробую то что вы описали

Answer 3

[Yusif Zourab]

Ищите проблему с ценниками в CSS, с помощью них можно все сделать.

Comments

[relows]

Что это значит? Какие ценники?

[Yusif Zourab]

relows, возможно я вас не совсем понял. Но я вижу лишь проблему с выводом цен товара.

Answer 4

[Михаил]

попробуй в CSS прописать так

.container {
width: 1201px;
}

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