Как вертикально сложить элементы в мобильном / планшетном представлении в html / css?

Question

Я работаю над скрипкой , которая прекрасно работает в режиме рабочего стола.

Вид рабочего стола работает таким образом, что при нажатии на любые 2 элемента продукта (по умолчанию один остается выбранным) , в нижней части отображается окно описания с подробным объяснением этого продукта.Предметы.

Фрагменты кодов CSS, которые я использовал для мобильного представления:

@media only screen and (max-width: 767px)
{
.product-all-contents
{
   overflow-x: auto;
}

.product-contents .product{
  min-width: 50.795%;
  margin: 0 2%;
    padding-top: 3.91%;
    padding-left: 3.91%;    padding-right: 3.91%;
  }
}

Постановка задачи:

В мобильном представлении есть одна небольшая проблема.Проблема в том, что я вижу объяснение обоих пунктов продукта, тогда как только один должен отображаться без изменения его внешнего вида, то есть элементы должны оставаться в стопке .

Я хочу, чтобы мобильное представление работало точно так же, как и на рабочем столе, т.е. когда мы щелкаем один элемент продукта, поле описания должно отображаться внизу, а когда мы щелкаем другой элемент продукта, должно отображаться другое окно описания.внизу.

Причина, по которой я использовал display: inline-block! Важный , потому что я хочу, чтобы элементы складывались вертикально в мобильном представлении в формате html / css.Удаление этого сделает изображения и текст сжатыми.

Answer 1

Одна из проблем, с которыми вы столкнулись, заключается в том, что вы задали свойство display как встроенный стиль в HTML, поэтому вы должны использовать important для перезаписи.Вторая проблема заключается в том, что вы не учитываете display: inline-block на вашем jQuery.

Вам придется изменить несколько вещей, я изменил скрипку, чтобы учесть эти вещи, работает только еслиВы нажимаете на кнопки, при загрузке вы видите оба элемента, есть несколько способов сделать эти вещи, я только хочу внести минимальные изменения, чтобы показать результат.

https://jsfiddle.net/zaefnson/2/

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

Answer 2

Это происходит потому, что вы установили display: inline-block !important; для div.franchisehubtv и div.cloudbasedtextipad в @media only screen and (max-width: 767px), что override ваше display: none; css.

Решение №: 1

Вы можете удалить эти классы из медиазапроса, поэтому ваш @media будет выглядеть следующим образом

@media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label  {
  display: inline-block !important;
}
.cloudbasedtextipad, .franchisehubtv {
   flex-direction: column;
 }
.tv img {
   max-width: 100%;
   height: auto;
  }
}

Решение №: 2

Вам нужно переопределить эти css, добавив эти строки

div.franchisehubtv[style="display: none;"] {
    display: none !important;
}
div.cloudbasedtextipad[style="display: none;"] {
    display: none !important;
}

Обновленная скрипта здесь

Обновление : Вы можетеустановите макет, используя flex для небольших устройств

Answer 3

Глядя на ваше текущее решение, у второго элемента div есть правило стиля, которое вызывается ниже 767 пикселей, что заставляет его отображаться как встроенный блок.Добавляя объявление! Важное, оно переопределяет любое другое объявление свойства.

Если вы удалите это правило, вы получите неверный макет, но div скрыт при необходимости.

Что касается макета, то для содержимого в каждом элементе div потребуется несколько уточненных правил flexbox, которые могут использовать одну и ту же точку останова для переключения между направлением столбца или строки:

flex-direction: column (for mobile)
flex-direction: row (for non-mobile)

Answer 4

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