-
beatsaheadAsked on November 19, 2017 at 1:18 PM
I am working on a form on which I would like to have an html box fixed to the side. It needs more work on the look, but is in the correct place on a PC, however it overlays the form on a mobile.
How can I get it to stay in the normal place on a phone.
-
Richie JotForm SupportReplied on November 19, 2017 at 2:15 PM
Hello,
To be able to make your form responsive you need to media queries css,
I cloned your form and edited the media queries css here is the final screenshot
Here is the css code:
/*Smallest screen*/
@media (max-width: 480px){
#text_263 {
position : fixed;
right : 15px;
bottom :380px;
width : 180px!important;
}
}
/* Tilted Smallest screen*/
@media (min-width:481px) and (max-width:600px){
#text_263 {
position : fixed;
right :10px;
bottom :70px;
width : 300px!important;
}
}/*medium screen*/
@media (min-width: 601px) and (max-width:960px){
#text_263 {
position : fixed;
right :150px;
bottom :880px;
width : 180px!important;
}
}/*Tilted medium screen*/
@media (min-width: 961px) and (max-width:1290px){
#text_263 {
position : fixed;
right :150px;
bottom :500px;
width : 180px!important;
}
}/*Desktop view*/
@media (min-width:1291px){
#text_263 {
position : fixed;
right :150px;
bottom :300px;
width : 180px!important;
}
}Feel free to edit the css,for more information on the media queries here is a guide:
https://css-tricks.com/logic-in-media-queries/
I hope this information helped you.
Best Regards.
-
beatsaheadReplied on November 19, 2017 at 3:41 PM
the final screen shot you have above still has the table floating which I dont want.
-
Richie JotForm SupportReplied on November 19, 2017 at 3:53 PM
Hi,
You can adjust the table with the media queries I have given to suit your needs.
Here is the css code:
/*Smallest screen*/
@media (max-width: 480px){
#text_263 {
position : fixed;
right : 15px;
bottom :380px;
width : 180px!important;
}
}
/* Tilted Smallest screen*/
@media (min-width:481px) and (max-width:600px){
#text_263 {
position : fixed;
right :10px;
bottom :70px;
width : 300px!important;
}
}/*medium screen*/
@media (min-width: 601px) and (max-width:960px){
#text_263 {
position : fixed;
right :150px;
bottom :880px;
width : 180px!important;
}
}/*Tilted medium screen*/
@media (min-width: 961px) and (max-width:1290px){
#text_263 {
position : fixed;
right :150px;
bottom :500px;
width : 180px!important;
}
}/*Desktop view*/
@media (min-width:1291px){
#text_263 {
position : fixed;
right :150px;
bottom :300px;
width : 180px!important;
}
}Here is a screenshot on the cloned form.
Please let us know if we can be of further assistance.
Best Regards.
-
beatsaheadReplied on November 20, 2017 at 3:27 AM
I'm sorry I'm not able to do what I want
What CSS do I use to stop it flooring and have it stay in a normal place on the form for mobile devices?
-
Richie JotForm SupportReplied on November 20, 2017 at 8:36 AM
Hello beatsahead,
And I am very sorry if the information I have given did not helped you.
Correct me if I am wrong, you dont want the table to be fixed with the scrolling but it to be fixed and stay at the top?
If so, the css woulde be:
position:absolute;
Here is the css code:
@media (max-width: 480px){
#text_263 {
position : absolute;
right : 1px;
bottom :1900px;
width : 180px!important;
}
}
@media (min-width:481px) and (max-width:600px){
#text_263 {
position : absolute;
right :20px;
bottom :1550px;
width : 300px!important;
}
}
@media (min-width: 601px) and (max-width:960px){
#text_263 {
position : absolute;
right :150px;
bottom :1550px;
width : 180px!important;
}
}
@media (min-width: 961px) and (max-width:1290px){
#text_263 {
position : absolute;
right :90px;
bottom :1550px;
width : 180px!important;
}
}
@media (min-width:1291px){
#text_263 {
position : absolute;
right :90px;
bottom :1550px;
width : 180px!important;
}
}Here is the form I have created feel free to clone it. https://form.jotform.com/73224831389966
If you need further assistance,let us know.
Best Regards.
-
beatsaheadReplied on November 20, 2017 at 11:07 AM
I wanted to have position :fixed on a pc, but not on a mobile as it covers the form.
-
Richie JotForm SupportReplied on November 20, 2017 at 12:33 PM
To enable the position to be fixed on a pc you must change your css: position:fixed;
/*Desktop view*/
@media (min-width:1291px){
#text_263 {
position : fixed;
right :150px;
bottom :300px;
width : 180px!important;
}
}then to make the table stay at the top in mobile view position:absolute;
Here is the css code:
@media (max-width: 480px){
#text_263 {
position : absolute;
right : 1px;
bottom :1900px;
width : 180px!important;
}
}
@media (min-width:481px) and (max-width:600px){
#text_263 {
position : absolute;
right :20px;
bottom :1550px;
width : 300px!important;
}
}
@media (min-width: 601px) and (max-width:960px){
#text_263 {
position : absolute;
right :150px;
bottom :1550px;
width : 180px!important;
}
}
@media (min-width: 961px) and (max-width:1290px){
#text_263 {
position : absolute;
right :90px;
bottom :1550px;
width : 180px!important;
}
}Here is the form I have created feel free to clone it. https://form.jotform.com/73224831389966
Best Regards.
-
beatsaheadReplied on November 20, 2017 at 12:41 PM
That's not it. I'm having trouble explaining. I want the floating field on a PC or large screen, but I don't need to see it at all on a smaller screen.
-
Richie JotForm SupportReplied on November 20, 2017 at 1:20 PM
I'm terribly sorry beatsahead for the misunderstanding.
You just wanted to make the table hide when it is on mobile so that your form can be seen properly correct?
To able to do that, just change position:fixed; then add margin-left:290px;
@media (max-width: 480px){
#text_263 {
position : fixed;
margin-left:290px;
bottom :300px;
width : 180px!important;
}
}You can adjust this numbers using the media queries depending on the screen.
Here is the mobile queries css.
/*For small devices*/
@media (max-width: 480px){
}/*side small devices*/
@media (min-width:481px) and (max-width:600px){
}
/*medium devices*/
@media (min-width: 601px) and (max-width:960px){
}/*side medium devices*/
@media (min-width: 961px) and (max-width:1290px){
}/*Large Screen*/
@media (min-width:1291px){
}I hope this information helps you, again my apologies.
Regards.