CODEWITHSUNDEEP
cssvue.jsgithubvuetify.js
thadeuszlay
thadeuszlay

Reputation: 3015

Offset at bottom of vuejs + vuetify application only on mobile

How come there is an offset at the bottom of my website and it is only visible on my phone (Xiami note 7) and (icognito) Chrome mobile browser?

https://photos.app.goo.gl/igaYU2gsBb99aMLT7

https://pandaquests.github.io/test2/

Code https://github.com/pandaquests/test2/tree/gh-pages?files=1

At first I thought it had something to do with the size of the content container. But I already set it to height: 100vh;. And it works fine on Laptop/Desktop browsers also in the inspect tool for mobile view it looks fine. However, on a real smartphone it looks off, i.e. there is an offset of visible height (see image).

It's hosted on github-pages written with vueJS, vuetify

I only used standard vuetify components with minor tweaks:

App bar:

https://codepen.io/thadeuszlay/pen/MWgZQzr?&editable=true&editors=101

Cards:

https://codepen.io/thadeuszlay/pen/wvwRyQz?&editable=true&editors=101

Upvotes: 0

Views: 700

Answers (1)

MarcRo
MarcRo

Reputation: 2473

The code in your github repo shows a style-attribute with max-height="600px" on a wrapping v-sheet component that somehow snuck in there :)

Upvotes: 1

Related Questions