Flex grid scaling when centered
-
Hi there
I am tinkering around with the following template:
<template> <q-page class="flex items-center justify-center bg-secondary"> <div class="logoPosition" v-if="this.$q.localStorage.getItem('uiEnableDarkMode')"> <img alt="NX logo" src="~assets/nexus-logo-neg.png" > </div> <div class="logoPosition" v-else> <img alt="NX logo" src="~assets/nexus-logo-pos.png"> </div> <q-scroll-area :thumb-style='thumbStyle' :content-style='contentStyle' :content-active-style='contentActiveStyle' style="width: 100%;" class="fill-window"> <div class="q-pt-sm flex items-center justify-center" :style="{ color: localTextColor1 }"> <div class="row"> <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px"> NEWS 1 </div> <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px"> NEWS 2 </div> <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px"> NEWS 3 </div> </div> <div class="row"> <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px"> NEWS 4 </div> <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px"> NEWS 5 </div> <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px"> NEWS 6 </div> </div> </div> </q-scroll-area> </q-page> </template>
Expected behavior:
- When resizing the app, the ‘news’ boxes scale to max-width and back to min-width AND move to stay centered (actually, I have glommed that idea from the Discord App - check out the “Activity” tab and resize the UI to see the effect I want)
Current behavior:
- The boxes stay centered but do not scale up to max-width or down min-width. They stay at the default width.
How do I achieve that effect (scaling to max-width / min-width AND staying centered)?
Cheers,
Michael