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

    responsive problem

    Help
    2
    8
    378
    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.
    • M
      mehran.akb last edited by

      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>
      
      dobbel 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @mehran.akb last edited by

        @mehran-akb your links are dead

        1 Reply Last reply Reply Quote 0
        • M
          mehran.akb last edited by mehran.akb

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

          1 Reply Last reply Reply Quote 0
          • dobbel
            dobbel last edited by dobbel

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

            M 1 Reply Last reply Reply Quote 1
            • M
              mehran.akb @dobbel last edited by

              @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

              1 Reply Last reply Reply Quote 0
              • dobbel
                dobbel last edited by

                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?

                M 1 Reply Last reply Reply Quote 0
                • M
                  mehran.akb @dobbel last edited by

                  @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

                  dobbel 1 Reply Last reply Reply Quote 0
                  • dobbel
                    dobbel @mehran.akb last edited by

                    @mehran-akb That looks much better!

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