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

[annaaa]

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

пример на сайте

http://gspland.ru/im...ssuary/shtativy

не удается добиться плавного перехода на новую строчку. пробовала min-width, но в этом случае 1 элемент переходит вниз, а за ним пустая строка. новые элементы появляются только на следующей (третей) строке. 

[mmth]

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

пример на сайте

http://gspland.ru/im...ssuary/shtativy

не удается добиться плавного перехода на новую строчку. пробовала min-width, но в этом случае 1 элемент переходит вниз, а за ним пустая строка. новые элементы появляются только на следующей (третей) строке. 

 

есть такое понятие как адаптивная верстка, за ним лучше сходить в гугл

затем посмотреть как реализована сетка, например: bootstrap или uikit

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

@media(max-width:640px){
  .some_class{
    margin-top: 100500px;
    /*свойства для нужных селекторов*/
  }
  /*и так далее для нужных селекторов*/
}

[annaaa]

 

есть такое понятие как адаптивная верстка, за ним лучше сходить в гугл

затем посмотреть как реализована сетка, например: bootstrap или uikit

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

@media(max-width:640px){
  .some_class{
    margin-top: 100500px;
    /*свойства для нужных селекторов*/
  }
  /*и так далее для нужных селекторов*/
}

Спасибо! Про адаптивную верстку я знаю, проблема именно с сеткой. где смотреть, как она реализована и менять ее?

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

Сообщение отредактировал annaaa: 26 May 2018 - 21:39

[mmth]

Спасибо! Про адаптивную верстку я знаю, проблема именно с сеткой. где смотреть, как она реализована и менять ее?

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

 

У вас взят за основу шаблон приложения catalog

на сколько знаю, у него адаптивности нет http://demo.jbzoo.com/sites/catalog/

Вам можно поверх на основе классов .width* написать свои условия для сетки по аналогии с сеткой бутстрап