Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Сделать адаптивными изображения в модуле


Recommended Posts

Доброго времени суток. Ниже фото проблемы. В модуле в админке задается размер изображения, на данный момент 240х240. В детскопной версии все ок, а в моб. версии обрезает картинку и показывает ее не полностью. Как решить проблему. Сайт king-pit.ru. файлик стилей модуля прикрепил.

 

h2.advantages {
	font-size: 22px;
	margin: 0px;
	padding: 10px 0;
	text-align: center;
}
.advantages-block {
	padding: 15px;
	margin: 0px 0px 20px;
	overflow: hidden;
}
.advantages-block > div {
	padding-left: 10px;
	padding-right: 10px;
}
.advantage {
	border: none;
	padding: 15px 0px;
	overflow: hidden;
}
.pos-center {
	text-align: center;
}
.pos-center .image {
	margin-bottom: 10px;
	width: 100%;
}
.advantage_link, .advantage_link:active, .advantage_link:hover, .advantage_link:focus {
	text-decoration: none;
	outline: none;
}
.advantage h4 {
	color: #68777D;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 18px;
	font-weight: bold;
	padding: 0px;
	margin-top: 5px;
}
.advantage .image-left {
	display: table-cell;
	padding: 6px 15px 0px 0px;
}
.advantage p {
	line-height: 20px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
	color: #424242;
	margin: 0px 0px 12px;
}
.advantage .caption { 
	min-height: 0 !important;
	padding: 0 !important;
}
.advantage .caption-right { 
	display: table-cell;
	vertical-align: top;
}
.advantage .readmore a { 
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
	color: #7E7E7E;
	font-size: 11px;
	font-family: Arial, sans-serif;
	text-transform: uppercase;
	width: 50%;
}
.advantage .readmore a:hover { 
	background: #5F98B0;
	border: 1px solid #5F98B0;
	color: #FFFFFF;
}

@media (max-width: 1100px) {
	.advantages-block {
		background-size: cover;
	}
}

 

rpl.jpg

rpl2.png

rpl3.png

Надіслати
Поділитися на інших сайтах


 

6 минут назад, MKaizer сказал:
7 минут назад, n3bo сказал:

Добавьте картинкам: class="img-responsive"

Добавить в стили


.advantage .image img {
    max-width: 100%;
}

  

Что, в общем-то, одно и то же.

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.