responsive problem



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


  • @mehran-akb your links are dead



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



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



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



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



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



  • @mehran-akb That looks much better!


Log in to reply