Hey there, I'm facing an issue with scrolling on mobile devices and iPads. When I view my site on desktop, there is no scrolling behavior, but as soon as I switch to a mobile device or iPad, the scroll appears. This problem is specific to mobile devices and iPads. Can anyone provide assistance on how to prevent this unwanted scrolling?
<v-card color="#1976D2" tile class="bg-color pa-0 px-2 mx-0" fluid>
<v-container fill-height>
<v-row class="pa-0" justify="center">
<v-card flat color="#1976D2">
<v-row class="mt-0" justify="left">
<v-avatar class="ml-5" style="background-color:#ffffff" size="70">
<v-img contain width="400" :height="$vuetify.breakpoint.lg
|| $vuetify.breakpoint.smOnly ? 150: 100" :src="`/img/syfol/logo.png`">
</v-img>
</v-avatar>
</row>
<v-col cols="12">
<div style="font-size:2em;" class="text-left white--text font-weight-bold">Syfol</div>
<div style="1em" class="white--text text-left">Sign in
</div>
<div class="text-left text-size">
<small class="mt-9 white--text text-size">Crack your complications with our Syfol
solution to get prevail in the field!
</small>
</div>
</col>
<v-col cols="12" sm="9">
<v-row justify="center">
<v-img contain width="400" :height="$vuetify.breakpoint.lg
|| $vuetify.breakpoint.smOnly ? 150: 200" :src="`/img/syfol/login-01.svg`"></v-img>
</v-row>
</col>
<v-col cols="12" sm="12" class="pb-lg-0 pb-0 pb-xl-2">
<v-row justify="center">
<v-col cols="12">
<v-btn block title='Sign in using Microsoft' class="text-primary rounded-xl text-capitalize font-weight-bold body-2 px-2" color="white" @click="getSharepointUrl" :loading="loading">
<v-icon color="primary" class="mr-2"> mdi-microsoft </v-icon>
Sign in with Microsoft
</v-btn>
</col>
</row>
</col>
<v-col class="pb-0 my-2" cols="12">
<div class="text-center">
<span class="white--text text-size text-size">follow us
</span>
</div>
</col>
<v-row class="mx-2 my-2" justify="center">
<v-col cols="3" md="2" sm="3" xl="2" xs="1" class="pa-0 pr-sm-1" lg="3" v-for="(item,index) in socialMedialLinks" :key="index">
<v-chip small style="fontSize:11px" class="ma-1" target="_blank" :href="item.link" text-color="white" :style="{backgroundColor:item.backgroundColor}">
<v-avatar class="ma-0 move-to-rightside" style="border:2px solid white !important">
<v-icon class="pa-1" color="white" style="font-size:15px;">{{ item.icon }}
</v-icon>
</v-avatar>
{{ item.text }}
</chipt>
</col>
</row>
<col class="pa-0 ma-2" cols="12">
<v-row class="my-1" justify="center">
<div class="text-size footer mb-6 text-center white--text text-size">© {{ currentYear }},
Processdrive India Pvt. Ltd. All Rights Reserved.
</div>
</row>
</col>
</card>
</row>
</container>
</card>
<style>
.bg-color {
background-color: #1976D2;
background-size: cover;
height: 100vh;
}
.footer {
position: fixed !important;
left: 0;
bottom: 0;
width: 100%;
color: rgb(253, 253, 253);
text-align: center;
}
.text-size {
font-size: 0.800rem !important;
}
.move-to-rightside {
position: relative !important;
right: 10px !important;
}
.container.container--app.pt-0 {
padding-left: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
}