i am trying to implement responsive col but it does not seem to work properly
in the head tag i have:
<meta name="viewport" content="width=device-width, initial-scale=1">
and in the html:
<div class="block lg:flex fullHeight">
<div class="formDiv col-12 md:col-6">
<div class="grid grid-nogutter fullHeight">
<div class="hidden lg:block lg:col-3">
some text
</div>
<div class="col-12 md:col-9">
<div style="height: 10%;"></div>
<div class="col py-8">
image
</div>
<div class="col raleway-bold-36-white pb-5">
some text
</div>
<div>
<form>
<div class="form-group grid grid-nogutter pb-2">
<div class="col-12 md:col-8">
<label for="email" :class="{'p-error':isFieldValid('email')}">Email</label>
<div>
<div class="p-inputgroup">
<InputText id="email" v-model="v$.form.email.$model" :class="{'p-invalid':isFieldValid('email')}" autofocus class="form-control" :style="{width: '100%', 'border-radius': '12px'}" />
</div>
<!-- <input id="email" type="email" class="form-control" v-model="email" required autofocus autocomplete="on" placeholder="Enter your email"> -->
</div>
<span v-if="v$.form.email.$error && submitted">
<span id="email-error" v-for="(error, index) of v$.form.email.$errors" :key="index">
<small class="p-error">{{error.$message}}</small>
</span>
</span>
<small v-else-if="(isFieldValid('email')) || v$.form.email.$pending.$response" class="p-error">{{v$.form.email.required.$message.replace('Value', 'Email')}}</small>
</div>
</div>
<div class="form-group grid grid-nogutter pt-6">
<div class="col-12 md:col-8">
<div class="col-offset-9 col-3 p-0">
<Button type="submit" class="loginBtn justify-content-center">
<span>Next</span>
</Button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="hidden lg:block lg:col-6 p-0">
some image 2
</div>
</div>
when it is viewed as normal image 2 does not reappear and if i add sm: to all col-12 then image 2 appears but the email field does not stretch all the way when in phone or tablet
