мобильная версия сайта

[anna86]

помогите пожалуйста, я новичок,не могу никак разобраться, проблема вот какая:
разработчик загрузил на сервер шаблон для модуля(или дополнения-не знаю как правильно) на главную страницу сайта с орфографическими ошибками,я решила исправить модуль в фотошопе, загрузила модуль на сайт, все бы ничего, но когда захожу на сайт с мобильного устройства, этот модуль некрасиво выходит за границы...формат вроде тот же, размеры такие же, но на телефоне все выпирает.... сайт магазина http://3dpaneli71.ru/
код картинки: <p style="text-align:center"><a href="http://3dpaneli71.ru/image/catalog/prichi2-1.png"><img src="http://3dpaneli71.ru/image/catalog/prichi2-1-obrezka.png" style="float:left; height:677px; width:1140px" /></a></p>
заранее спасибо!

[SiteMix]

Такие вещи не картинкой нужно делать, а верстать блоками. Тогда в зависимости от размера экрана будет разное количество в ширину. Ну а если делать картинкой то нужно задать максимальную ширину 100% или назначить класс img-responsive. Но в этом случае на мобильном экране текст будет очень мелким.

 

Кстати, сейчас картинка растянута шире своего размера из-за чего на десктопе она замыленная.

Змінено 3 березня 2019 користувачем SiteMix

[anna86]

если бы я знала что такое верстать блоками)) и где искать назначение класса и как ее сжать- было бы хорошо, но я новичок, сама разбираюсь в админке, мне дали ключ и все...поэтому хотелось бы пошаговой инструкции решения проблем)) и все же- спасибо за ответ!

 

[anna86]

8 минут назад, Pascha сказал:

чего? Подскажите версию фотошопа в котором правятся модули
2. Для адаптивности в движке опенкарт, к картинкам как правило прописывается
 

class="img-responsive" 

и высоту катринки определять не пикселями, а

 

auto

к примеру так
 

<p style="text-align:center">
  <a href="http://3dpaneli71.ru/image/catalog/prichi2-1.png">
    <img src="http://3dpaneli71.ru/image/catalog/prichi2-1-obrezka.png" style="float:left; height:auto; width:1140px" class="img-responsive" />
  </a>
</p>

 

получится примерно так http://joxi.ru/E2pbO3nF7xEdGr, но

при совсем малом разрешении на телефоне ваши преимущества в виде картинок будут выглядеть точками, а подписи под ними палочками...http://joxi.ru/bmov3RbS3dg6or

используйте модуль преимуществ, или закажите доработку, не выдумывайте велосипед, который не поедет

Спасибо вам большое за ответ вариант с изменениями высоты решил проблему! по поводу модуля в фотошопе, пояснила в скобках, что как правильно- не знаю, потому то сюда и обратилась, сайт производитель оформил бесплатно, но инструкций никаких не дал, и хочется пока без платных дополнений разобраться как работает платформа, и стоит ли вкладывать деньги или перейти на другую! наш магазин пока сыроват, вот и хочу научиться на этом работать с платформой! еще раз спасибо за подсказки!!!!

[anna86]

17 минут назад, Pascha сказал:

"Тут картинка.." - менять на ссылку на картинку
"Тут преимущество.." - написать название преимущества 

 

  Показать контент

 

 

<div class="adv">

<div class="col-xs-12"> Наши преимущества </div> 

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">    
      <div class="advansed-image">
      
      <img src="Тут картинка1" alt="" title="" class="img-responsive">
      
      </div>
      
      <div class="advansed-name">  Тут преимущество1   </div>     
    
  </div>

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">    
      <div class="advansed-image">
      
      <img src="Тут картинка2" alt="" title="" class="img-responsive">
      
      </div>
      
      <div class="advansed-name">  Тут преимущество2    </div>     
    
  </div>

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">    
      <div class="advansed-image">
      
      <img src="Тут картинка3" alt="" title="" class="img-responsive">
      
      </div>
      
      <div class="advansed-name">  Тут преимущество3    </div>     
    
  </div>

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">    
      <div class="advansed-image">
      
      <img src="Тут картинка4" alt="" title="" class="img-responsive">
      
      </div>
      
      <div class="advansed-name">  Тут преимущество4    </div>     
    
  </div>

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">    
      <div class="advansed-image">
      
      <img src="Тут картинка5" alt="" title="" class="img-responsive">
      
      </div>
      
      <div class="advansed-name">  Тут преимущество5    </div>     
    
  </div>

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">    
      <div class="advansed-image">
      
      <img src="Тут картинка6" alt="" title="" class="img-responsive">
      
      </div>
      
      <div class="advansed-name">  Тут преимущество6    </div>     
    
  </div>

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">    
      <div class="advansed-image">
      
      <img src="Тут картинка7" alt="" title="" class="img-responsive">
      
      </div>
      
      <div class="advansed-name">  Тут преимущество7    </div>     
    
  </div>

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">    
      <div class="advansed-image">
      
      <img src="Тут картинка8" alt="" title="" class="img-responsive">
      
      </div>
      
      <div class="advansed-name">  Тут преимущество8    </div>     
    
  </div>

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">    
      <div class="advansed-image">
      
      <img src="Тут картинка9" alt="" title="" class="img-responsive">
      
      </div>
      
      <div class="advansed-name">  Тут преимущество9    </div>     
    
  </div>

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">    
      <div class="advansed-image">
      
      <img src="Тут картинка10" alt="" title="" class="img-responsive">
      
      </div>
      
      <div class="advansed-name">  Тут преимущество10    </div>     
    
  </div>
 
 </div>
 
 <style>
 .adv {
     text-align:: center;
    padding: 20px;
    font-weight:: 700;
 }
 .adv .advansed-image img {
    margin-left: auto;
    margin-right: auto;
}
 </style>

 

 

 

 

 

спасибо за советы и рекомендации, то,что вы прислали, я даже  не знаю куда применять, возможно в далеком будущем, я разберусь и применю ваш "набор алгоритмов" (опять же-не знаю как вы-программисты назваете это)!)))))за велосипед- отдельное спасибо!))))крутые стебы для неосведомленных чайников, как я)) удачи и огромных успехов вам в вашей работе!))