Блоки наезжают друг на друга при просмотре со смартфона bootstrap

[cactusyou]

Верстаю для тренировки и пытаюсь сделать адаптивную версию, при просмотре с мобильных один блок наезжает на другой. Думала, что колонки  в bootstrap автоматически сдвигаются одна за одной в мобильных версиях. 

перепробовала уже много чего и не могу понять в чем все-таки проблема. 

вот код: https://jsfiddle.net/6jgoewz5/

http://piccy.info/view3/12360772/8e3e730ee144105131409f09bbe3231f/  

как можно исправить?

[klierik]

Здравствуйте.

Колонки в bootstrap автоматически идут одна за другой, в Вашей вёрстке тоже. Скорее всего проблема в картинке, которая абсолютно позиционированна.

Попробуйте этот код:

.gradient-square {    
    width: 195px;    
}
@media screen and (min-width: 768px) {
	.gradient-square {
		position: absolute;
		z-index: 30;
	}
}

 

[Raritet]

 

	<div class="col-md-6  right-section ">

Немного не по теме, но вроде бы очень не рекомендуется ставить кастомные классы в служебный бутстраповский контейнер. Или пофиг? 

[Alexej]

9 часов назад, Raritet сказал:

 

	<div class="col-md-6  right-section ">

Немного не по теме, но вроде бы очень не рекомендуется ставить кастомные классы в служебный бутстраповский контейнер. Или пофиг? 

Лишь бы работало же, не так ? 

[klierik]

10 часов назад, Raritet сказал:

 

	<div class="col-md-6  right-section ">

Или пофиг? 

Нет не пофиг. Код должен работать как ожидается изначально, из коробки.

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

[Vlad_P]

В 30.05.2018 в 22:47, klierik сказал:

Нет не пофиг. Код должен работать как ожидается изначально, из коробки.

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

Вообще да. лезть в сетку не следует, ну если только сильно хочется). Хотя классы я лично присваиваю в целях изменения свойств flexbox например. Проще добавить 1 свой, чем добавлять кучу от бутстрапа. Да и для наследования удобно