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

Центровка элементов


Recommended Posts

  • 1 month later...

@mazein @jaffagold Здравствуйте. В общем похожая ситуация возникла:

Только теперь это просто картинки без текста, размер 1 картинки 135 высота 355 длина, их 3 штуки.

Проблема:

1. При ширине экрана меньше 768 пикс изображение начинают копироваться.

2. В мобильной версии сайта изображения стоят не по центру, смещены вправо соответственно процентов 10 срезано.

Не понимаю почему так происходит, много перепробовал, не получается исправить, ниже кидаю html и css.

Как вы выше написали типа попробуй через баннеры - схемы. Хоть это была и шутка я всё равно попробовал (слайд шоу/баннер/карусель) - без успешно, слишком криво выходит.

 

Скрытый текст

/catalog/view/theme/default/template/common/home.tpl


<div class="offer clearfix">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center">
      <a rel="nofollow" href="/delivery/" id="offer-one" title="Узнать подробности">
        <span class="offer-img"></span>
        </a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center">
      <a href="https://site.ru/checking" id="offer-two" title="Узнать подробности">
        <span class="offer-img"></span>
        </a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center">
      <a href="https://site.ru/service" id="offer-three" title="Узнать подробности">
        <span class="offer-img"></span>
        </a>
</div>
  </div>

/catalog/view/theme/default/stylesheet/stylesheet.css


.offer {
    width: 100%;
    margin: -5px 0px 5px;
}
.offer-img {
    height: 135px;
    width: 100%;
    display: block;
    margin: auto;
}

#offer-one .offer-img {
    background-image: url('../image/offer/offer1.png');
    background-position: 0 0;
}

#offer-two .offer-img {
    background-image: url('../image/offer/offer2.png');
    background-position: 0px 0;
}

#offer-three .offer-img {
    background-image: url('../image/offer/offer3.png');
    background-position: 0px 0;
}

 

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


18 минут назад, Lifeamove сказал:

Только теперь это просто картинки без текста, размер 1 картинки 135 высота 355 длина, их 3 штуки.

без ссылки сложно понять, а та, что вы ранее давали- не работает

гляньте тут

http://htmlbook.ru/css/cat/color

и почему не через тэг img делаете?

У него есть прекрасный класс img-responsive, благодаря которому картинка масштабируется в зависимости от разрешения экрана

Змінено користувачем jaffagold
  • +1 1
Надіслати
Поділитися на інших сайтах


@jaffagold Спасибо, поменял - всё работает.

 

Скрытый текст

/catalog/view/theme/default/stylesheet/stylesheet.css


.offer {
    width: 100%;
}
.offer-img {
    height: 135px;
    width: 100%;
    display: block;
    margin: auto;
}

#offer-one .offer-img {
    background-image: url('../image/offer/offer1.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#offer-two .offer-img {
    background-image: url('../image/offer/offer2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#offer-three .offer-img {
    background-image: url('../image/offer/offer3.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

 

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


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

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

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

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

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

Вхід

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

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

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

Important Information

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