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/homei 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/testand 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=sharingbut this is my note 9 result:
https://drive.google.com/file/d/1GkMw0T43j_AWQu5-RI1CqBQ0U_OUdO-5/view?usp=sharingin 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!