In my layout 2 columns on small devices

Hello,
Could you please look at design of
http://vtasks.my-demo-apps.tk/
site

In my vue/cli 4 / Bootstrap 4.3 app I make listing of tasks in 1 column on small devices(ipad-s)
and 2 columns on big devices, like :

<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:

But testing different devices with Chrome, Chromium I see 2 colums on ipad:
https://imgur.com/a/QEfcHdi
and I do not see why.
Is it error in my design? Problems with browsers ?

Thanks!

 

More the fault of the choice of technologies and how it has you pissing out endless pointless DIV for NOTHING, presentational use of classes, and pissing on the markup with an equal amount of "JS for nothing".

There's a reason I consider vue as mentally enfeebled and incompetent as bootcrap. You need to go find a stick to scrape that nonsense off with as it's just making you work harder, not smarter. AT BEST it has made you write as much code as HTML as you would have written in CSS without the framework, at worst it has made you piss on semantics and accessibility whilst bloating out the page and making you write two to ten times the code needed to do the job!

See how you don't even HAVE page content scripting off. /FAIL/ at accessibility. See how in your screencap of the document inspector you've got all those agonizingly pointless DIV.

It's vomiting up this (pretty printed)

<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="Task category" 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="Task priority" 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="Task estimation" 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="Required skill for this project" 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="Required skill for this project" 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="Required skill for this project" 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="Task is in Processing status. Lorem ipsum dolor sit amet" 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="Task has 2 events" 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>

Code (markup):

To do the job of this:

	<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="Task is in Processing status. Lorem ipsum dolor sit amet"
				class="fa fa-battery-half"
			></i>
			<i
				title="Task has 2 events"
				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>

Code (markup):

A THIRD the code... and if you maintained separation of presentation from content and proper controls, instead of derping presentational classes at it in blind hopes of controlling it via bootcrap's even derpier methodology, you could set your break-point for width either via media queries, or using flex + min-width, both of which take a fraction the effort to implement.

ANYONE telling you that using bootcrap or vue for this has made anything "easier" for you is flapping their arse-cheeks in the wind. More so given how it pisses on accessibility and usability. The ONLY thing you can learn from these "frameworks" is now NOT to use HTML, CSS, or JavaScript; no matter how many brain-washed fanboys will try to bandwagon you into thinking otherwise with bald-faced LIES!

In terms of a page that's so ridiculously simple, your choice of technologies is slapping the straight-jacket, hobble skirt and ballet heels on you when it comes to controlling the layout and/or the amount of work required to get it done.

 

Thanks!
Your feedback was rough, but it has sense.
I remade design of some pages, could you please take a look at several pages


http://vtasks.my-demo-apps.tk/
open any details link page


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

and with login into the system
http://vtasks.my-demo-apps.tk/login
http://vtasks.my-demo-apps.tk/profile

Thanks!

 

It's very hard to diagnose or make recommendations given it's still knee deep in "client side JavaScript for NOTHING". The fixed height layout with the inner scrollbar is also a BIG accessibility failing -- there's a reason you don't see many "normal" websites pulling these types of layout stunts. You've basically recreated the "problem" that framesets brought to the table... and why nobody uses -- or at least is supposed to use -- framesets anymore.

I mean, take that events page, it's vomiting up 1.35 megabytes in 35 files for 5.5k of plaintext and not a single content media element -- not even 10k of HTML's job. Any "ease" that vue or bootcrap is giving you is just placebo nonsense.

Again, I'd toss it all in the bin and start over, the various frameworks have just taught you how NOT to deliver content over the web... to the point your server-side operations are likely working ten times harder than they need to, and what you've had to code was six or seven times more effort than the job required... and that is just going to keep snowballing the more you work with it.

You've made fixes, but it's like treating a gunshot wound with chewing gum and bailing wire.