В моем макете 2 столбца на маленьких устройствах

Привет, Не могли бы вы посмотреть дизайн
http://vtasks.my-demo-apps.tk/

сайт В моем приложении vue/cli 4/Bootstrap 4.3 я делаю список задач в 1 столбце на небольших устройствах (ipad-s). и 2 столбца на больших устройствах, например:

 <div class="row " v-show="tasks.length && is_page_loaded">
<div v-for="(nextActiveTask, index) in tasks" :key="nextActiveTask.id" class="col-sm-12 col-md-6 p-2 m-0">
<task-list-item
:currentLoggedUser="currentLoggedUser"
:nextActiveTask="nextActiveTask"
:index="index"
:is_show_location="true"
></task-list-item>
</div>
</div>

HTML: Но тестируя разные устройства с Chrome, Chromium, я вижу 2 столбца на iPad:

https://imgur.com/a/QEfcHdi

и я не понимаю почему. Это ошибка в моем дизайне? Проблемы с браузерами? Спасибо!

Очень сложно диагностировать или давать рекомендации, поскольку он все еще глубоко погружен в «клиентский JavaScript для НИЧЕГО». Макет фиксированной высоты с внутренней полосой прокрутки также является БОЛЬШИМ недостатком доступности — есть причина, по которой вы не видите, чтобы многие «нормальные» веб-сайты выполняли подобные трюки с макетом.

По сути, вы воссоздали «проблему», которую принесли с собой наборы фреймов.

и почему никто больше не использует — или, по крайней мере, не должен использовать — наборы фреймов. Я имею в виду, возьмем эту страницу событий, она занимает 1,35 мегабайта в 35 файлах для 5,5 тысяч открытого текста и ни одного медиа-элемента контента - даже не 10 тысяч HTML-работы.

Любая «легкость», которую дает вам vue или бутхерня, — это просто чепуха плацебо. Опять же, я бы выбросил все это в мусорное ведро и начал все сначала, различные платформы только что научили вас, как НЕ доставлять контент через Интернет.

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

и то, что вам пришлось написать, потребовало в шесть или семь раз больше усилий, чем требовалось для работы.

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

Больше всему виной выбор технологий и то, как это заставляет вас бесить бесконечные бессмысленные DIV для НИЧЕГО, презентационное использование классов и ругань разметки равным количеством «JS даром». Есть причина, по которой я считаю vue умственно слабым и некомпетентным, как мусор. Вам нужно найти палку, чтобы соскоблить эту ерунду, потому что она просто заставляет вас работать усерднее, а не умнее. В ЛУЧШЕМ СЛУЧАЕ он заставил вас написать столько же кода, как HTML, так и вы написали бы на CSS без фреймворка, в худшем случае это заставило вас разозлиться на семантику и доступность, в то же время раздувая страницу и заставляя вас писать в два-десять раз больше кода, который необходимо было сделать.

работа! Посмотрите, как у вас даже НЕТ сценария содержания страницы.

/FAIL/ при доступности.

Посмотрите, как на скриншоте инспектора документов вы видите все эти мучительно бессмысленные элементы DIV.

Это рвота (хорошо напечатано)

 
<div>
<h3>
<a href="/task-details/mastering-laravel-vue-js">
Mastering Laravel/vue.js
</a>
</h3>
<ul class="tags">
<li><i class="fa fa-wrench"></i>Laravel Development</li>
</ul>
<div class="priorityAndPrice">
<span><i class="fa fa-asterisk"></i>High</span>
<i class="fa fa-money"></i> $320.00
</div>
<p>
Mastering Laravel/vue.js descri Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a...
</p>
<p class="dates">
From <strong>4th December, 2019</strong> till <strong>4th February, 2020</strong>
</p>
<h4>Skills required for this project:</h4>
<ul class="requiredSkills">
<li>Vue.js</li>
<li>Laravel</li>
<li>PHP</li>
</ul>
<div class="statusAndEvents">
<i
title="Задача находится в статусе обработки. Lorem ipsum dolor сидеть амет"
class="fa fa-battery-half"
></i>
<i
title="Задача имеет 2 события"
class="fa fa-calendar"
></i>
</div>
<a href="/task-details/mastering-laravel-vue-js" class="details">
<i class="fa fa-tasks"></i> Details
</a>
</div>

Код (разметка): Чтобы выполнить эту работу:

  <div data-v-13397afc="" class="col-sm-12 col-md-6 p-2 m-0"> <div data-v-13397afc="" class="task_item_container" is_show_location="true"> <div class="card-header p-2 m-0 row_content_left_aligned"> <h4 class="task_title" style="display: flex; flex: 1 0 0%;"><a href="/task-details/mastering-laravel-vue-js" class="a_link"> Mastering Laravel/vue.js </a></h4></div> <div class="column_content_left_aligned p-2"> <div class="row_content_left_aligned p-2"> <div class="task_category pr-4" style="display: flex; flex: 1 0 0%;"><i title="Категория задачи" class="i_link pt-1 fa fa-wrench"></i>Laravel Development </div> <!----> </div> <div class="row_content_left_aligned" style="width: 100% !important;"> <div class="p-2 pt-3"><i title="Приоритет задачи" class="i_link pb-2 fa fa-asterisk"></i><strong>High</strong></div> <div class="row_content_right_aligned" style="display: flex; flex: 1 1 0%; align-self: flex-end;"> <h4 class="mb-2 mr-2"><i title="Оценка задачи" class="i_link fa fa-money"></i><span class="price">$320.00</span></h4></div> </div> </div> <div class="card-body pt-0 column_content_left_aligned"> <div style="display: flex; justify-content: flex-start;"><span class="pre-formatted description-text">Mastering Laravel/vue.js descri Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a...</span></div> <div class="p-3">From <strong>4th December, 2019</strong> till <strong>4th February, 2020</strong></div> <div class="card-body pt-0 column_content_left_aligned badge_item_row"> <div class="badge_item_row_cell "> <button type="button" class="btn text-nowrap"><span title="Необходимые навыки для этого проекта" class="badge badge-info p-1"><!----> Vue.js </span></button> </div> <div class="badge_item_row_cell "> <button type="button" class="btn text-nowrap"><span title="Необходимые навыки для этого проекта" class="badge badge-info p-1"><!----> Laravel </span></button> </div> <div class="badge_item_row_cell "> <button type="button" class="btn text-nowrap"><span title="Необходимые навыки для этого проекта" class="badge badge-info p-1"><!----> PHP </span></button> </div> </div> <div class="row_content_left_aligned"> <div style="display: flex; flex: 1 1 0%;"> <div class="icon_right_centered p-2 pt-3"><i title="Задача находится в статусе обработки. Lorem ipsum dolor сидеть амет" class="i_link pb-2 task_status_icon_P fa fa-battery-half"></i></div> <div class="icon_right_centered p-2 pt-3"><i title="Задача имеет 2 события" class="i_link pb-2 fa fa-calendar"></i></div> <!----> </div> <div role="alert" class="alert alert-primary row_content_centered" style="display: flex; flex: 1 1 0%;"><a href="/task-details/mastering-laravel-vue-js" class="a_link"><i class="i_link fa fa-tasks"></i>Details </a></div> </div> </div> </div> </div>

Код (разметка): A ТРЕТИЙ код.

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

ЛЮБОЙ говорить вам, что использование bootcrap или vue для этого облегчило вам что-либо, - это хлопать задницами по ветру. Тем более, учитывая, как это раздражает доступность и удобство использования. ЕДИНСТВЕННОЕ, чему вы можете научиться из этих «фреймворков», — это теперь НЕТ использовать HTML, CSS или JavaScript; независимо от того, сколько фанатов с промытыми мозгами будут пытаться убедить вас думать иначе с наглым видом ЛОЖЬ! Что касается страницы, которая настолько смехотворно проста, ваш выбор технологий заключается в том, чтобы накинуть на вас смирительную рубашку, хромающую юбку и балетки, когда дело доходит до контроля макета и / или объема работы, необходимой для ее выполнения.

Спасибо! Ваш отзыв был грубым, но в нем есть смысл. Я переделал дизайн некоторых страниц, не могли бы вы взглянуть на несколько страниц?
http://vtasks.my-demo-apps.tk/

открыть любую страницу с подробной ссылкой
http://vtasks.my-demo-apps.tk/events

и с входом в систему
http://vtasks.my-demo-apps.tk/login

http://vtasks.my-demo-apps.tk/profile

Спасибо!