How do i make the form field responsive?
up vote
-1
down vote
favorite
I have just started to learn django few weeks. To learn more effectively i have started to build a hotel website and deployed using heroku. The website seems better on mine laptop but looks worse on my ipad or mobile. I wanted to make the form fields reponsive using css or django crispy form. I have found a lot of answers but none of them help me understand how to do it. Also any further recommendation for the website would be recommended for me as a beginner in web development.
Here is the website: https://hotel-jumera.herokuapp.com
(Its mine practise for building website, so sorry for in case copyright issue)
form field in template:
<form method='post'>
{% csrf_token %}
{{booking_form.as_p }}
<button type="submit" class="btn btn-success"> Send </button>
</form>
html css django responsive-design django-crispy-forms
asked Nov 9 at 3:51
Bishal Gautam
1
add a comment |
up vote
-1
down vote
favorite
I have just started to learn django few weeks. To learn more effectively i have started to build a hotel website and deployed using heroku. The website seems better on mine laptop but looks worse on my ipad or mobile. I wanted to make the form fields reponsive using css or django crispy form. I have found a lot of answers but none of them help me understand how to do it. Also any further recommendation for the website would be recommended for me as a beginner in web development.
Here is the website: https://hotel-jumera.herokuapp.com
(Its mine practise for building website, so sorry for in case copyright issue)
form field in template:
<form method='post'>
{% csrf_token %}
{{booking_form.as_p }}
<button type="submit" class="btn btn-success"> Send </button>
</form>
html css django responsive-design django-crispy-forms
asked Nov 9 at 3:51
Bishal Gautam
1
You can use bootstrap
– ruddra
Nov 9 at 3:52
using bootstrap'sclass = "form-control"on your form fields might be enough after checking your website...
– robotHamster
Nov 9 at 4:03
Sorry to bother you but i am unable to use class="form-control", i tried to research on it , but it just seems so vague for me.Thanks!
– Bishal Gautam
Nov 9 at 7:15
Can you be more specific on how to use the class="form-control " on the form
– Bishal Gautam
Nov 9 at 7:22
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I have just started to learn django few weeks. To learn more effectively i have started to build a hotel website and deployed using heroku. The website seems better on mine laptop but looks worse on my ipad or mobile. I wanted to make the form fields reponsive using css or django crispy form. I have found a lot of answers but none of them help me understand how to do it. Also any further recommendation for the website would be recommended for me as a beginner in web development.
Here is the website: https://hotel-jumera.herokuapp.com
(Its mine practise for building website, so sorry for in case copyright issue)
form field in template:
<form method='post'>
{% csrf_token %}
{{booking_form.as_p }}
<button type="submit" class="btn btn-success"> Send </button>
</form>
html css django responsive-design django-crispy-forms
asked Nov 9 at 3:51
Bishal Gautam
1
I have just started to learn django few weeks. To learn more effectively i have started to build a hotel website and deployed using heroku. The website seems better on mine laptop but looks worse on my ipad or mobile. I wanted to make the form fields reponsive using css or django crispy form. I have found a lot of answers but none of them help me understand how to do it. Also any further recommendation for the website would be recommended for me as a beginner in web development.
Here is the website: https://hotel-jumera.herokuapp.com
(Its mine practise for building website, so sorry for in case copyright issue)
form field in template:
<form method='post'>
{% csrf_token %}
{{booking_form.as_p }}
<button type="submit" class="btn btn-success"> Send </button>
</form>
html css django responsive-design django-crispy-forms
html css django responsive-design django-crispy-forms
asked Nov 9 at 3:51
Bishal Gautam
1
asked Nov 9 at 3:51
Bishal Gautam
1
asked Nov 9 at 3:51
Bishal Gautam
1
asked Nov 9 at 3:51
Bishal Gautam
1
asked Nov 9 at 3:51
Bishal Gautam
1
1
You can use bootstrap
– ruddra
Nov 9 at 3:52
using bootstrap'sclass = "form-control"on your form fields might be enough after checking your website...
– robotHamster
Nov 9 at 4:03
Sorry to bother you but i am unable to use class="form-control", i tried to research on it , but it just seems so vague for me.Thanks!
– Bishal Gautam
Nov 9 at 7:15
Can you be more specific on how to use the class="form-control " on the form
– Bishal Gautam
Nov 9 at 7:22
add a comment |
You can use bootstrap
– ruddra
Nov 9 at 3:52
using bootstrap'sclass = "form-control"on your form fields might be enough after checking your website...
– robotHamster
Nov 9 at 4:03
Sorry to bother you but i am unable to use class="form-control", i tried to research on it , but it just seems so vague for me.Thanks!
– Bishal Gautam
Nov 9 at 7:15
Can you be more specific on how to use the class="form-control " on the form
– Bishal Gautam
Nov 9 at 7:22
You can use bootstrap
– ruddra
Nov 9 at 3:52
You can use bootstrap
– ruddra
Nov 9 at 3:52
using bootstrap's
class = "form-control" on your form fields might be enough after checking your website...– robotHamster
Nov 9 at 4:03
using bootstrap's
class = "form-control" on your form fields might be enough after checking your website...– robotHamster
Nov 9 at 4:03
Sorry to bother you but i am unable to use class="form-control", i tried to research on it , but it just seems so vague for me.Thanks!
– Bishal Gautam
Nov 9 at 7:15
Sorry to bother you but i am unable to use class="form-control", i tried to research on it , but it just seems so vague for me.Thanks!
– Bishal Gautam
Nov 9 at 7:15
Can you be more specific on how to use the class="form-control " on the form
– Bishal Gautam
Nov 9 at 7:22
Can you be more specific on how to use the class="form-control " on the form
– Bishal Gautam
Nov 9 at 7:22
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
What you want to do is set some break points in your css where you can change the width of elements on your site
@media only screen and (min-width: 400px) {
.col-2 {
background-color: red;
}
}
If the browser window is 600px or bigger, the background color will be red.
This is a mobile first approach. You build your site for mobile and then add breakpoints to cater for larger screens tablet min-width: 600px and desktop min-width: 1200px
answered Nov 9 at 4:12
Trevor Joseph
11
I tried to use media queries but it seems it doesnot have any effect to my browser.Thanks!
– Bishal Gautam
Nov 9 at 7:18
I'm going to need more info Where are you added the media query
– Trevor Joseph
Nov 9 at 8:56
I have tried every where and finally got somewhat reponsive but using django-crispy-forms
– Bishal Gautam
Nov 9 at 10:59
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
What you want to do is set some break points in your css where you can change the width of elements on your site
@media only screen and (min-width: 400px) {
.col-2 {
background-color: red;
}
}
If the browser window is 600px or bigger, the background color will be red.
This is a mobile first approach. You build your site for mobile and then add breakpoints to cater for larger screens tablet min-width: 600px and desktop min-width: 1200px
answered Nov 9 at 4:12
Trevor Joseph
11
I tried to use media queries but it seems it doesnot have any effect to my browser.Thanks!
– Bishal Gautam
Nov 9 at 7:18
I'm going to need more info Where are you added the media query
– Trevor Joseph
Nov 9 at 8:56
I have tried every where and finally got somewhat reponsive but using django-crispy-forms
– Bishal Gautam
Nov 9 at 10:59
add a comment |
up vote
0
down vote
What you want to do is set some break points in your css where you can change the width of elements on your site
@media only screen and (min-width: 400px) {
.col-2 {
background-color: red;
}
}
If the browser window is 600px or bigger, the background color will be red.
This is a mobile first approach. You build your site for mobile and then add breakpoints to cater for larger screens tablet min-width: 600px and desktop min-width: 1200px
answered Nov 9 at 4:12
Trevor Joseph
11
I tried to use media queries but it seems it doesnot have any effect to my browser.Thanks!
– Bishal Gautam
Nov 9 at 7:18
I'm going to need more info Where are you added the media query
– Trevor Joseph
Nov 9 at 8:56
I have tried every where and finally got somewhat reponsive but using django-crispy-forms
– Bishal Gautam
Nov 9 at 10:59
add a comment |
up vote
0
down vote
up vote
0
down vote
What you want to do is set some break points in your css where you can change the width of elements on your site
@media only screen and (min-width: 400px) {
.col-2 {
background-color: red;
}
}
If the browser window is 600px or bigger, the background color will be red.
This is a mobile first approach. You build your site for mobile and then add breakpoints to cater for larger screens tablet min-width: 600px and desktop min-width: 1200px
answered Nov 9 at 4:12
Trevor Joseph
11
What you want to do is set some break points in your css where you can change the width of elements on your site
@media only screen and (min-width: 400px) {
.col-2 {
background-color: red;
}
}
If the browser window is 600px or bigger, the background color will be red.
This is a mobile first approach. You build your site for mobile and then add breakpoints to cater for larger screens tablet min-width: 600px and desktop min-width: 1200px
answered Nov 9 at 4:12
Trevor Joseph
11
answered Nov 9 at 4:12
Trevor Joseph
11
answered Nov 9 at 4:12
Trevor Joseph
11
answered Nov 9 at 4:12
Trevor Joseph
11
11
I tried to use media queries but it seems it doesnot have any effect to my browser.Thanks!
– Bishal Gautam
Nov 9 at 7:18
I'm going to need more info Where are you added the media query
– Trevor Joseph
Nov 9 at 8:56
I have tried every where and finally got somewhat reponsive but using django-crispy-forms
– Bishal Gautam
Nov 9 at 10:59
add a comment |
I tried to use media queries but it seems it doesnot have any effect to my browser.Thanks!
– Bishal Gautam
Nov 9 at 7:18
I'm going to need more info Where are you added the media query
– Trevor Joseph
Nov 9 at 8:56
I have tried every where and finally got somewhat reponsive but using django-crispy-forms
– Bishal Gautam
Nov 9 at 10:59
I tried to use media queries but it seems it doesnot have any effect to my browser.Thanks!
– Bishal Gautam
Nov 9 at 7:18
I tried to use media queries but it seems it doesnot have any effect to my browser.Thanks!
– Bishal Gautam
Nov 9 at 7:18
I'm going to need more info Where are you added the media query
– Trevor Joseph
Nov 9 at 8:56
I'm going to need more info Where are you added the media query
– Trevor Joseph
Nov 9 at 8:56
I have tried every where and finally got somewhat reponsive but using django-crispy-forms
– Bishal Gautam
Nov 9 at 10:59
I have tried every where and finally got somewhat reponsive but using django-crispy-forms
– Bishal Gautam
Nov 9 at 10:59
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53219615%2fhow-do-i-make-the-form-field-responsive%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can use bootstrap
– ruddra
Nov 9 at 3:52
using bootstrap's
class = "form-control"on your form fields might be enough after checking your website...– robotHamster
Nov 9 at 4:03
Sorry to bother you but i am unable to use class="form-control", i tried to research on it , but it just seems so vague for me.Thanks!
– Bishal Gautam
Nov 9 at 7:15
Can you be more specific on how to use the class="form-control " on the form
– Bishal Gautam
Nov 9 at 7:22