How to make responsive web for login ui for quasar?

<template>
  <div class="q-pa-md" style="width: 400px">
    <q-img src="./../assets/logo.png" width="100%">
      <div class="row justify-center bg-transparent" style="width: 100%">
        <div class="column justify-center items-center q-pa-md bg-banner">
          <q-img src="./../assets/logo.png" width="100px" />
            <div class="text-black text-subtitle1">My Project</div>
        </div>
      </div>
    </q-img>
    <q-form class="q-mt-md">
      <q-input filled label="Your email *" lazy-rules />

      <q-input filled label="Password *"> </q-input>

      <div style="margin-top: 40px" class="q-gutter-x-sm">
        <q-btn label="Login" color="primary" />
        <q-btn flat label="Sign Up" />
        <q-btn flat label="Forgot Password?" />
      </div>
    </q-form>
  </div>
</template>

<script>
</script>
<style scoped>
.bg-banner {
  background-color: white;
  opacity: 0.85;
  border-radius: 3px;
}
</style>