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

[Lifeamove]

jaffagold, да не готова, спасибо, туда ещё наверное нужно rel="nofollow" и title="..."

[Lifeamove]

@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;
}

 

[jaffagold]

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

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

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

гляньте тут

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

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

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

Змінено 15 квітня 2017 користувачем jaffagold

[Lifeamove]

@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;
}