Сообщений в теме: 6

[Yojhik]

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

[Cheren-dow]

Yojhik, в версии JBZoo 220  для адаптивности таблицы корзины использовали это решение.

[Yojhik]

Подскажите пожалуйста, CSS файлик будет большой jbzoo.css?

[SmetDenis]

Извините, как это связано с jbzoo.css ?

[Yojhik]

Странно.. Создал шаблон для jbzoo item,

<tr class="table-row item_<?php echo $item->id;?>">
    <td><?php echo $this->renderPosition('cell1'); ?></td>
    <td><?php echo $this->renderPosition('cell2'); ?></td>
    <td><?php echo $this->renderPosition('cell3'); ?></td>
    <td><?php echo $this->renderPosition('cell4'); ?></td>
 
</tr>

CSS

table { 
  width: 100%; 
  border-collapse: collapse; 
}
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  text-align: left; 
}



@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {

table, thead, tbody, th, td, tr { 
    display: block; 
  }

  .jbzoo .module-items .wrapper-item-desc td {

    border-bottom: none;
  }
  
  td { 
    font-size: 14pt;
    text-align: initial;
    position: relative;
    padding-left: 50%; 
  }
  
  td:before { 
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
  }

После этого картинки, логотипы, стали обрезаться по краям, я когда я изменяю размер окна до мобильного, получается очень не красиво, правая сторона вообще пустая,картинка маленькая, текст пляшет.. Дайте совет, как лучше организовать показ, чтобы картинка была большая и по центру, внизу название, а под ним описание (если есть) и в конце цена... А то сейчас это форменное уродство 

 

Прикрепленные изображения

• 

[Cheren-dow]

Yojhik, без навыков в HTML и CSS сверстать то что вам нужно не получится. Смотрите документацию по CSS и HTML

[Yojhik]

Спасибо, буду смотреть.