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!

    710a296b-e9f7-40f3-ae76-63b44387217d-image.png

    <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


Log in to reply