How to make responsive web for login Ui for quasar

[sahdan96]

I use Quasar framework and Vue js to make a login ui. So there problem is when switch to mobile, the Ui did not resize to fit. And I still new to quasar and javascript.

<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>

[hawkeye64]

@sahdan96 What do you mean switch to mobile? My guess is you are using the browser's dev tools to emulate a mobile device? If this is the case, then you have to refresh the page any time you change the emulated device so Quasar gets the proper information (device type, etc).

[sahdan96]

I mean using the browser 'responsive design mode'.

[hawkeye64]

You are setting the width to 400px

<div class="q-pa-md" style="width: 400px">

Maybe use the breakpoint classes

[sahdan96]

How do I use the breakpoint classes. Can you add the code?

[hawkeye64]

Look at this page: https://quasar.dev/layout/grid/row