1. Home
  2. Help
  3. responsive problem

responsive problem

  • M

    Hi.
    I used quasar UMD Install in my project.
    my project show correctly and responsively in chrome(in all size of screen. and i test with responsive extension of chrome).
    but in my phone not show responsively.
    url of my project is: http://demo.lastleo.com/home

    i also create a test page and use code directly from quasar document but the problem was not solved.
    test page is: http://demo.lastleo.com/test

    and test page code is:

    <!DOCTYPE html>
<html>
  <!--
    WARNING! Make sure that you match all Quasar related
    tags to the same version! (Below it's "@1.12.2")
  -->

  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/quasar@1.12.2/dist/quasar.min.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div id="q-app">
    <template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <q-carousel
        v-model="slide"
        transition-prev="scale"
        transition-next="scale"
        swipeable
        animated
        control-color="white"
        navigation
        padding
        arrows
        height="300px"
        class="bg-primary text-white shadow-1 rounded-borders"
      >
        <q-carousel-slide name="style" class="column no-wrap flex-center">
          <q-icon name="style" size="56px" ></q-icon>
          <div class="q-mt-md text-center">
            @{{ lorem }}
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="tv" class="column no-wrap flex-center">
          <q-icon name="live_tv" size="56px" />
          <div class="q-mt-md text-center">
            @{{ lorem }}
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="layers" class="column no-wrap flex-center">
          <q-icon name="layers" size="56px" />
          <div class="q-mt-md text-center">
            @{{ lorem }}
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="map" class="column no-wrap flex-center">
          <q-icon name="terrain" size="56px" />
          <div class="q-mt-md text-center">
            @{{ lorem }}
          </div>
        </q-carousel-slide>
      </q-carousel>

      <q-carousel
        v-model="slide"
        transition-prev="jump-right"
        transition-next="jump-left"
        swipeable
        animated
        control-color="white"
        prev-icon="arrow_left"
        next-icon="arrow_right"
        navigation-icon="radio_button_unchecked"
        navigation
        padding
        arrows
        height="300px"
        class="bg-purple text-white shadow-1 rounded-borders"
      >
        <q-carousel-slide name="style" class="column no-wrap flex-center">
          <q-icon name="style" size="56px" />
          <div class="q-mt-md text-center">
            @{{ lorem }}
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="tv" class="column no-wrap flex-center">
          <q-icon name="live_tv" size="56px" />
          <div class="q-mt-md text-center">
            @{{ lorem }}
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="layers" class="column no-wrap flex-center">
          <q-icon name="layers" size="56px" />
          <div class="q-mt-md text-center">
            @{{ lorem }}
          </div>
        </q-carousel-slide>
        <q-carousel-slide name="map" class="column no-wrap flex-center">
          <q-icon name="terrain" size="56px" />
          <div class="q-mt-md text-center">
            @{{ lorem }}
          </div>
        </q-carousel-slide>
      </q-carousel>
    </div>
  </div>
</template>
    </div>
    <!-- Add the following at the end of your body tag -->
    
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.2/dist/quasar.umd.min.js"></script>
    
    <script>
      /*
        Example kicking off the UI. Obviously, adapt this to your specific needs.
        Assumes you have a <div id="q-app"></div> in your <body> above
       */
      new Vue({
        el: '#q-app',
        data: function () {
          return {
        slide: 'style',
        lorem: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque voluptatem totam, architecto cupiditate officia rerum, error dignissimos praesentium libero ab nemo.'
          }
        },
        methods: {},
        // ...etc
      })
    </script>
  </body>
</html>
    0 dobbel 1 Reply
  • dobbel

    @mehran-akb your links are dead

    0
  • M

    @dobbel
    no please try again
    test url is http://demo.lastleo.com/tests

    0
  • dobbel

    looks fine on my android phone…responsive and all. Can you be more specific what you think is wrong? image ?

    1 M 1 Reply
  • M

    @dobbel
    tank you for response.
    this is result of my chrome view:
    https://drive.google.com/file/d/1TQd5KqXYMpTRIy0QyQYoqfRKf9dglf9L/view?usp=sharing

    but this is my note 9 result:
    https://drive.google.com/file/d/1GkMw0T43j_AWQu5-RI1CqBQ0U_OUdO-5/view?usp=sharing

    in second picture i must zoom to work with system and is not correctly responsive

    0
  • dobbel

    first there’s no difference between the chrome view and the note 9 image, both have the same 2 column layout ( note 9 has a bit bigger screen). What you probably want is to wrap the second carousel under the first when viewed on mobile ( or any device with a smaller screen). Is this correct?

    0 M 1 Reply
  • M

    @dobbel
    no i dont want this.
    i switched to cli mode. and now result of same code in my phone is:
    https://drive.google.com/file/d/1H3zmYNnwhF-wBQw5qLkU5Lh0OCv-F1fo/view?usp=sharing

    0 dobbel 1 Reply
  • dobbel

    @mehran-akb That looks much better!

    0
Log in to reply