Skip to content
Advertisement

Bootstrap Content not full screen on Mobile phone screen

In this Form content not stretch into full screen in the Mobile phone screen but in the computer and Tab screen its show properly. pls advice to solve.

enter image description here

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row d-flex">
    <div class="col-md-6 ftco-animate">
        <div class="blog-entry align-self-stretch d-flex">
            <div class="col-sm-12 col-md-12 col-lg-12 text p-4 d-block">
                <h3 class="heading mt-3"><strong>Login to the Website.</strong></h3>
                <form id="logging" name="logging" method="POST" action="<?php echo 
    $_SERVER['PHP_SELF']; ?>">
                    <div class="form-group">
                        <label> Email </label><span class="required text-danger"> *</span> <input type="email" id="email" name="email" class="form-control" placeholder="Your Email">
                    </div>
                    <div class="form-group">
                        <label> Password</label><span class="required text-danger"> *</span><input type="password" id="pw" name="pw" class="form-control" placeholder="Password">
                    </div>
                    <div><small class="text-primary"><a href="contact.php" data-toggle="modal" data- target="#modalAppointment"><span>Forget Password...</span></a> </small></div>
                    </br>
                    <div class="form-group">
                        <input type="submit" name="LogIn" id="LogIn" value="LogIn" class="btn btn-primary 
    py-3 px-5">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Advertisement

Answer

Remove width on .blog-entry .text

.blog-entry .text {
    position: relative;
    border-top: 0;
    border-radius: 2px;
    width: 55%;/*Remove this Width*/
}

OR

Remove this class text

<div class="col-sm-12 col-md-12 text p-4 d-block"> 

to

<div class="col-sm-12 col-md-12 p-4 d-block">
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement