Разъезжаются элементы вёрстки?

Question

[Super Star]

Здравствуйте. Есть у меня вот такая карточка с товаром:

В ряд их должно быть 4 штуки и по мере уменьшения размера экрна должно быть 3-2-1. Это я сделал, но вот наименование товара и цена при сжатии наезжают друг на друга, выходят за пределы элемента LI

Кроме этого мне нужно будет потом еще сделать чтобы при наведени курсора форма принимала вот такой вид (я так подозреваю с такими косяками будет и это если не исправить):


Я запарился. Что-то я делаю не так, но сам исправить не могу. Помогите решить эту задачу

Вот код: https://jsfiddle.net/v784g6aL/

Answer 1

[IceJOKER]

При наведении - https://jsfiddle.net/v784g6aL/1/
А чтоб не наезжали - поиграйтесь с clear

Answer 2

[Виктор Таран]

я мож туплю но у вас две колонки
откуда кол 12 ?
Я могу придумать милион способов сделать это же самое без костылей и единого стиля.
Зачем вы на бутстрапе выдумывете велосипед
да еще и с

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	.wraper li{
	width: 29.33333%;
}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

	.wraper li{
	width: 46%;

Притом не попадая ни в одно из разрешений ?

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

@media(max-width:767px){}

/* Small */
@media(min-width:768px) and (max-width:991px){}

/* Medium */
@media(min-width:992px) and (max-width:1199px){}

/* Large */
@media(min-width:1200px){}

вы изначально более детально опишите что вам нужно, или дайте протатип.
Сейчас ваша верстка похожа на то что вас обязали сделать на бутстрапе. Вы подключили цсс использовали пару классов, и дальше по старинке стали ручками собирать.
В результате у вас получится что -то вроде вот такой сипотной верстки, при виде которой на глаз наворачивается слеза.
demo.warungthemes.com/html/ameera/archive-grid-ful...

А в вашей верстке бутстрап только мешается.

Comments

[Super Star]

Я сам учусь. Я бы пошел в какую-нибудь контору, но живу в маленьком городе и таковых нет, а ехать куда-то не вариант так как за что-то нужно жить там. Хотелось бы удалённо, но я не могу найти такого человека или команду которой нужен новичёк(раб) желающий получить знания. Редко кто попадается что может нормально что-то рассказать. Не всегда удаётся найти аналогичный шаблон. Выглядит это всё вот так https://cloud.mail.ru/public/5uKV/dPDiaaeCJ нет psd шаблона с разлинеенной сеткой бутстрап. Вот это всё что есть. Я подумал, что нужно сделать эту карточку как адаптивную галерею. Я могу взять bootstrap-аповскую строку разделить на 4 колонки, но ведь товаров больше, а если они будут добавляться...

[Super Star]

Особенно меня пугают такие секции на подобии "Как мы работаем" Как правильно эту линию нарисовать. Используя SVG или брать картинку линии повернуть используя transform и с помощью z-index расположить их ниже блоков с контентом. Я бы рад чтобы меня взяли в ученики. но пока мои поиски не дали результатов.

[Super Star]

Подскажите каким образом можно сверстать эту секцию. чтобы всё не разъезжалось и было адаптивным?

[Виктор Таран]

Открой сайт бутстрапа
Почитай там всего 3 странички

[Виктор Таран]

Весь бутстрап всего 28 килов, это тебе не битрикс его можно выучить за день.