Начать новую тему

Секции в мобильной версии

Здравствуйте!

Я настраивал шаблон на мобильных разрешениях и столкнулся с проблемой. У меня есть фильтр на странице категории, и мне нужно убрать его в определенном диапазоне ширин окна, где он выглядит слишком узким. Я прописал для него display:none на ширинах до 1024px, полагая, что соседняя секция автоматически расширится и заполнит образовавшуюся пустоту. Но если при разрешении до 767px каждая секция отображается во всю ширину и все выглядит нормально, то дальше получается, что фильтр исчезает, но соседняя секция не заполняет его место, хотя должна, и место остается пустым (скрин). Как это исправить?

Спасибо.


png
(145 KB)

Здравствуйте.


Возможно, в этой ситуации вам подойдут стандартные классы hidden-phone и hidden-tablet Мерчиума. Они работают по следующей схеме:

 

// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
    // Hide everything else
    .hidden-desktop    { display: inherit !important; }
    .visible-desktop   { display: none !important ; }
    // Show
    .visible-tablet    { display: inherit !important; }
    // Hide
    .hidden-tablet     { display: none !important; }
}

// Phones only
@media (max-width: 767px) {
    // Hide everything else
    .hidden-desktop    { display: inherit !important; }
    .visible-desktop   { display: none !important; }
    // Show
    .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
    // Hide
    .hidden-phone      { display: none !important; }
}

  

Спасибо.

Не помогает, поскольку в них по существу прописано то же самое. Какое правило нужно прописать, чтобы секция растянулась до края контейнера? Может как-то просуммировать width для двух секций и присвоить значение width первой секции?

Здравствуйте!


Жаль, что наши рекомендации не помогли вам. Боюсь, что в данной ситуации потребуется профессиональная помощь специалистов по интеграции дизайна. Мы можем предложить вам услуги наших партнеров Маркета Мерчиума. Они будут рады вам помочь. 


Спасибо.


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