How to adjust the position of DOM element using Quasar framework?

[tesicg]

I have mobile app written in Vue.js and Quasar. It looks as following:

The template and style code look as following:

<template>
  <q-page>
    <q-pull-to-refresh
      ref="pullToRefresh"
      @refresh="onRefresh"
    >
      <div class="bg-primary q-px-lg q-pb-lg">
        <q-card
          class="flex justify-between text-white bg-secondary q-pa-lg text-center shadow-6 no-wrap dashboard__board">
          <router-link :to="{name: 'Workout'}" class="q-py-xs">
            <div class="text-h6 text-bold q-pb-xs">{{ workoutResult.sum }}</div>
            <div>Выработка</div>
          </router-link>
          <div class="divider"></div>
          <router-link :to="{name: 'Workout'}" class="q-py-xs">
            <div class="text-h6 text-bold q-pb-xs">{{ workoutResult.orders_count }}</div>
            <div>Всего ОУ</div>
          </router-link>
          <div class="divider"></div>
          <router-link :to="{name: 'Grades'}" class="q-py-xs">
            <div class="text-h6 text-bold q-pb-xs">{{ gradesStatistics.reviews_count }}</div>
            <div>Оценок</div>
          </router-link>
        </q-card>
      </div>

      <div class="q-pl-lg q-pt-lg q-pr-lg row q-col-gutter-lg dashboard__grid">
        <div v-for="social in socialBanners" :key="social.link" class="col-6 q-ma-none">
          <a :href="social.link" target="_blank" class="dashboard__card no-shadow dashboard__card_message">
            <div class="dashboard__card__content">
              <img :src="social.image" alt="">
            </div>
          </a>
        </div>
      </div>

      <div class="q-pa-lg row q-col-gutter-lg dashboard__grid">

        <div class="col-6">
          <Container
            class="full-height"
            group-name="1"
            :auto-scroll-enabled=false
            :get-child-payload="getChildPayload1"
            @drop="onDrop('leftColumn', $event)"
          >
            <Draggable v-for="item in leftColumn" :key="item.order" class="col-6 q-mb-lg">
              <router-link tag="q-card" :to="item.link"
                          class="dashboard__card no-shadow"
                          :class="{'_disabled': item.disabled}">
                <div class="dashboard__card__content">
                  <q-icon :name="item.icon" size="28px" :style="{'color': item.iconColor}" class="card__icon q-mb-sm"/>
                  <div class="dashboard__card__text">
                    {{ item.title }}
                  </div>
                </div>
              </router-link>
            </Draggable>
          </Container>
        </div>

        <div class="col-6">
          <Container
            class="full-height"
            group-name="1"
            :auto-scroll-enabled=false
            :get-child-payload="getChildPayload2"
            @drop="onDrop('rightColumn', $event)"
          >
            <Draggable v-for="item in rightColumn" :key="item.order" class="col-6 q-mb-lg">
              <router-link tag="q-card" :to="item.link"
                          class="dashboard__card no-shadow"
                          :class="{'_disabled': item.disabled}">
                <div class="dashboard__card__content">
                  <q-icon :name="item.icon" size="28px" :style="{'color': item.iconColor}" class="card__icon q-mb-sm"/>
                  <div class="dashboard__card__text">
                    {{ item.title }}
                  </div>
                </div>
              </router-link>
            </Draggable>
          </Container>
        </div>

      </div>

      <div class="q-px-lg q-pb-lg">
        <a
          href="https://docs.google.com/forms/d/e/1FAIpQLSdz8eQFkKtua8ySqG0CxK0hF69p7Mmk1LAjHv-wiwm49G0Wvg/viewform"
          target="_blank"
          class="q-btn q-btn-item text-md full-width bg-primary text-white q-pa-md q-btn--rectangle flex-center"
        >
          Увольняешься? Пройди опрос!
        </a>
      </div>

    </q-pull-to-refresh>
  </q-page>
</template>

<style scoped lang="stylus">
.divider {
  width: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.dashboard__board {
  a {
    text-decoration: none;
    color: inherit;
  }
}

.dashboard__card {
  width: 100%;
  padding-bottom: 100%;
  box-sizing: border-box;
  position: relative;
  display: block;

  &_message {
  background: #abe7ea;
    img {
      height: 100%;
    }
  }

  &._disabled {
    opacity: 0.5;
  }

  &__content {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: $primary;
  }

  &__text {
    font-size: 1.1em;
  }
}

@media (max-height: 675px) {
  .dashboard__card {
    padding-bottom: 70%;
  }
}

@media (max-width: 400px) {
  .dashboard__grid {
    margin-left: -12px;
    margin-top: -12px;

    & > * {
      padding-top 12px;
      padding-left: 12px;
    }
  }

  .dashboard__card {
    &__text {
      font-size: 1em;
    }
  }
}

@media (max-width: 350px) {
  .dashboard__grid.row > .col-4 {
    width: 50%;
  }

  .dashboard__board {
    padding: 20px 15px;
    font-size: 0.9em;

    .text-h6 {
      font-size: 1.1em;
    }
  }
}
</style>

As you can see the last element is a bit lower, that is there is an extra space between that element and upper part.

I can fix it by adding "mb-fix" class in this way:

The template and style code:

<template>
  <q-page>
    <q-pull-to-refresh
      ref="pullToRefresh"
      @refresh="onRefresh"
    >
      <div class="bg-primary q-px-lg q-pb-lg">
        <q-card
          class="flex justify-between text-white bg-secondary q-pa-lg text-center shadow-6 no-wrap dashboard__board">
          <router-link :to="{name: 'Workout'}" class="q-py-xs">
            <div class="text-h6 text-bold q-pb-xs">{{ workoutResult.sum }}</div>
            <div>Выработка</div>
          </router-link>
          <div class="divider"></div>
          <router-link :to="{name: 'Workout'}" class="q-py-xs">
            <div class="text-h6 text-bold q-pb-xs">{{ workoutResult.orders_count }}</div>
            <div>Всего ОУ</div>
          </router-link>
          <div class="divider"></div>
          <router-link :to="{name: 'Grades'}" class="q-py-xs">
            <div class="text-h6 text-bold q-pb-xs">{{ gradesStatistics.reviews_count }}</div>
            <div>Оценок</div>
          </router-link>
        </q-card>
      </div>

      <div class="q-pl-lg q-pt-lg q-pr-lg row q-col-gutter-lg dashboard__grid">
        <div v-for="social in socialBanners" :key="social.link" class="col-6 q-ma-none">
          <a :href="social.link" target="_blank" class="dashboard__card no-shadow dashboard__card_message">
            <div class="dashboard__card__content">
              <img :src="social.image" alt="">
            </div>
          </a>
        </div>
      </div>

      <div class="q-pa-lg row q-col-gutter-lg dashboard__grid mb-fix">

        <div class="col-6">
          <Container
            class="full-height"
            group-name="1"
            :auto-scroll-enabled=false
            :get-child-payload="getChildPayload1"
            @drop="onDrop('leftColumn', $event)"
          >
            <Draggable v-for="item in leftColumn" :key="item.order" class="col-6 q-mb-lg">
              <router-link tag="q-card" :to="item.link"
                          class="dashboard__card no-shadow"
                          :class="{'_disabled': item.disabled}">
                <div class="dashboard__card__content">
                  <q-icon :name="item.icon" size="28px" :style="{'color': item.iconColor}" class="card__icon q-mb-sm"/>
                  <div class="dashboard__card__text">
                    {{ item.title }}
                  </div>
                </div>
              </router-link>
            </Draggable>
          </Container>
        </div>

        <div class="col-6">
          <Container
            class="full-height"
            group-name="1"
            :auto-scroll-enabled=false
            :get-child-payload="getChildPayload2"
            @drop="onDrop('rightColumn', $event)"
          >
            <Draggable v-for="item in rightColumn" :key="item.order" class="col-6 q-mb-lg">
              <router-link tag="q-card" :to="item.link"
                          class="dashboard__card no-shadow"
                          :class="{'_disabled': item.disabled}">
                <div class="dashboard__card__content">
                  <q-icon :name="item.icon" size="28px" :style="{'color': item.iconColor}" class="card__icon q-mb-sm"/>
                  <div class="dashboard__card__text">
                    {{ item.title }}
                  </div>
                </div>
              </router-link>
            </Draggable>
          </Container>
        </div>

      </div>

      <div class="q-px-lg q-pb-lg">
        <a
          href="https://docs.google.com/forms/d/e/1FAIpQLSdz8eQFkKtua8ySqG0CxK0hF69p7Mmk1LAjHv-wiwm49G0Wvg/viewform"
          target="_blank"
          class="q-btn q-btn-item text-md full-width bg-primary text-white q-pa-md q-btn--rectangle flex-center"
        >
          Увольняешься? Пройди опрос!
        </a>
      </div>

    </q-pull-to-refresh>
  </q-page>
</template>

<style scoped lang="stylus">
.divider {
  width: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.dashboard__board {
  a {
    text-decoration: none;
    color: inherit;
  }
}

.dashboard__card {
  width: 100%;
  padding-bottom: 100%;
  box-sizing: border-box;
  position: relative;
  display: block;

  &_message {
  background: #abe7ea;
    img {
      height: 100%;
    }
  }

  &._disabled {
    opacity: 0.5;
  }

  &__content {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: $primary;
  }

  &__text {
    font-size: 1.1em;
  }
}

.mb-fix {
  margin-bottom: -24px;
}

@media (max-height: 675px) {
  .dashboard__card {
    padding-bottom: 70%;
  }
}

@media (max-width: 400px) {
  .dashboard__grid {
    margin-left: -12px;
    margin-top: -12px;

    & > * {
      padding-top 12px;
      padding-left: 12px;
    }
  }

  .dashboard__card {
    &__text {
      font-size: 1em;
    }
  }
}

@media (max-width: 350px) {
  .dashboard__grid.row > .col-4 {
    width: 50%;
  }

  .dashboard__board {
    padding: 20px 15px;
    font-size: 0.9em;

    .text-h6 {
      font-size: 1.1em;
    }
  }
}
</style>

But, I think it's not right way to do it. It's hack.

How can I fix it in normal way using Quasar framework or maybe something else?

[tesicg]

I've found the solution. You can delete this post.

Thank you

[corepay]

thanks for sharing....