No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Help with a seemingly easy task: 3 cards

    Help
    2
    4
    366
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • I
      ilabutk last edited by

      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>
      
      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        Like this?`

        https://codepen.io/smolinari/pen/oNbBWqG

        Scott

        1 Reply Last reply Reply Quote 0
        • I
          ilabutk last edited by

          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>
          
          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

            Great. Glad you figured it out.

            Scott

            1 Reply Last reply Reply Quote 0
            • First post
              Last post