Help with a seemingly easy task: 3 cards
-
Struggle with a seemingly easy task: how to make cards 1 & 2 to align to the left/right of card 3; or let card 3 aligns perfectly to card 1’s left and card 2’s right? (It also needs to be responsive.) Thanks!
<template> <div class="q-mx-sm q-pb-xs"> <div class="row justify-around"> <div class="col-md-5 col-xs-12 q-pa-sm"> <q-card style="height: 200px"> <q-card-section dense class="bg-primary text-center text-white" > <div class="text-h6">card 1 </div> </q-card-section> </q-card> </div> <div class="col-md-5 col-xs-12 q-pa-sm"> <q-card style="height: 200px"> <q-card-section dense class="bg-primary text-center text-white" > <div class="text-h6">card 2</div> </q-card-section> </q-card> </div> </div> <div class="column q-pa-sm"> <q-card style="height: 200px"> <q-card-section dense class="bg-primary text-center text-white" > <div class="text-h6">card 3</div> </q-card-section> </q-card> </div> </div> </template>
-
-
Thanks. It did not but it inspired me. (Also, they were in a router view. The outside layout messes it up. This worked:
<div class="row q-col-gutter-md q-pt-md"> <div class="col-xs-12 col-sm-6 col-md-6"> <q-card style="height: 200px"> <q-card-section dense class="bg-primary text-center text-white" > <div class="text-h6">card 1 </div> </q-card-section> </q-card> </div> <div class="col-xs-12 col-sm-6 col-md-6"> <q-card style="height: 200px"> <q-card-section dense class="bg-primary text-center text-white" > <div class="text-h6">card 2</div> </q-card-section> </q-card> </div> <div class="col-xs-12 col-sm-6 col-md-12"> <q-card style="height: 200px"> <q-card-section dense class="bg-primary text-center text-white" > <div class="text-h6">card 3</div> </q-card-section> </q-card> </div> </div>
-
Great. Glad you figured it out.
Scott