Problems making Bootstrap 3 more mobile friendly [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm creating a personal website using Twitter Bootstrap 3.4.3 for frontend and Python/Django 1.5.4 for backend. I'm currently having a lot of problems trying to get the website into a more mobile friendly mode. I'm using the cover and blog templates for my site. The cover template is the one that is being problematic.
Here is a snippet of the homepage of my website on a laptop-
And here is what it looks like on my smartphone -
Here's what the contact page looks like on my laptop -
And here's what it looks like on my smartphone -
As you can see in the mobile version, the background is not surrounding all elements and pictures and textboxes are not properly positioned.
I'm using the standard Twitter Bootstrap cover.css file for all the styling of the home page and contact page. Here is some example code I'm using for the main body -
html,
body {
height: 100%;
width: 100%;
background: url("../background-2.jpg") center no-repeat;
background-size:cover;
}
How can I change the styling to make my website mobile friendly?

Answer 1

The classes you apply to the form is what will matter before any custom CSS: .form-control. Bootstrap 3 Forms
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="email_form" method="POST" action="/home/contact/">
<div class="row">
<input type='hidden' name='csrfmiddlewaretoken' value='uusHSjnOjeCLfyaCwmUC3eKH3EXIH9iX' />
<div class="col-md-6">
<div class="form-group">
<input id="id_name" maxlength="200" name="name" placeholder="Name" type="text" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="id_email" name="email" placeholder="E-mail" type="text" class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input id="id_subject" maxlength="100" name="subject" placeholder="Subject" type="text" class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea cols="40" id="id_message" name="message" placeholder="Message" rows="10" class="form-control"></textarea>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit" name="send">Send</button>
</form>
</div>
You have two different stylesheets which are actually identical other then these rules (you really only need one file between these two):
cover.css has this rule and mobile.css is missing the height and width which is probably causing your problem with the background.
html, body {
height: 100%;
width: 100%;
background: url("http://www.raghavkumar.work/static/background-2.jpg") center no-repeat;
background-size:cover;
}
mobile.css has the this rule which cover.css does not.
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Also, both have this error: bottom is misspelled. padding-bottom
.helptext {
padding-bottm: 2px;
font-size: 15px;
}