Golovina90
@Golovina90
Начинающий Web-Master

Как адаптировать таблицу в Битриксе?

На Битриксе есть таблица в карточке товара (справа).
В мобильнике так получается:
5ec338d00e3ce172265947.jpeg
Подскажите, как сделать ее адаптивной?
Самый лучший вариант - способ переноса слов на новую строку, как в exel. Чтобы влезала вся таблица. Как тут:
5ec33d9637332107993693.jpeg
Но предполагаю, что придется заново верстать, с расчетом на адаптив.
  • Вопрос задан
  • 496 просмотров
Решения вопроса 1
Golovina90
@Golovina90 Автор вопроса
Начинающий Web-Master
Изобрела свой велосипед) Вот результат:
5ec3dd600002d983890723.jpeg
5ec3dd69ad03c477280372.jpeg
Адаптив через @ media:
@media screen and (max-width: 800px) {
	table.kartochka td {display: block;}
	table.kartochka td::before {
		content: attr(data-label);
		float: left;
		font-size: 17px;
		margin-top: 2px;
		margin-right: 20px;
	}
	table.kartochka td.align::before, table.kartochka td.align-old::before {
		font-size: 27px;
		font-weight: 300;
	}
	table.kartochka td.align::before {
		color: #87b523;
	}
	.btn {font-size: 16px !important;}
	.name-baza, .name-on_photo, .span-price, .span-old_price {
		/*float: left;*/
	}
	.good .right .btn {
	padding-left: 0;
	padding-right: 0;
	}
	table.kartochka .colspan {
		display: none;
  	}
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
squitcher
@squitcher
Верстальщик
Попробуй изобрести велосипед из этого https://codepen.io/true404/pen/jxxQRx
Ответ написан
Комментировать
@arttstyle
web-макака
верстать через flexbox
адаптировать через @ media
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы