Form not responsive to page

Good Morning,
I have a responsive site which works very well.

I have created a new contact form and placed into an existing test page which can be seen here http://www.theremotedoctor.co.uk/tes...rollto=content
When i view the page on a mobile or tablet the form is off the screen where the rest of the page seems fine.
I thought that as media query or responsive code was in place already it would have taken care of it like wrapping the form so the input fields would be shown in a vertical column.

Please could you advise what i am required to add so the page is view correctly.

See my attached photo please.

Many Thanks.

Quote:

---

I thought that as media query or responsive code was in place already it would have taken care of it like wrapping the form so the input fields would be shown in a vertical column.

---

Nope - the markup for the form is contained in a table, so you can either take away the table, or you can try to make it responsive by forcing it to NOT behave like a table https://css-tricks.com/responsive-data-tables/

Hi there theremotedr,

why did you not use the form code that "deathshadow" provided in this post...

Table inside div issue

He gave you a fully responsive example here...

Form Demo

...plus all the relevant files here...

ipbr21054/

coothead

Hi,
I have now gone with "deathshadows" code.
And like all other items it isnt like his example.
You can confirm that here http://www.theremotedoctor.co.uk/test-form.html

Some redundant code is messing things up i assume.

you have <form id="contact" and yet in none of the css do you have #contact

I have just copied & paste from elsewhere ???

I get conflicting info & cant sort it out.

Here is the css and i see plenty of contct mentioned.
Can you advise why you dont see it ?

Code:

---

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img {
        margin:0;
        padding:0;
}

img, fieldset {
        border:none;
}

hr {
        display:none;
        /*
                HR in my code are for semantic breaks in topic/section, NOT
                style/presenation, so hide them from screen.css users
        */
}

@media (max-width:480px) {
        /*
                Some older small screen devices will try to force a text-size
                adjustment regardless of our viewport meta, this overrides that
                so it obeys what we tell it. This is in a max-width query so that
                we don't send this to desktop safari, as it breaks zooming there...
                Even though it does NOT break zooming in mobile Safari?
               
                Way to herpa that derp there Apple!
        */
        * {
                -webkit-text-size-adjust:none;
                -ms-text-size-adjust:none;
        }
}

body {
        min-width:48em; /* for legacy desktops */
        padding:0 1em 1em;
        font:normal 85%/150% arial,helvetica,sans-serif;
}

h1 {
        text-align:center;
        padding:0.5em 0;
}

#contact {
        max-width:66em;
        margin:0 auto;
}

#contact b {
        color:#F00;
}

@media (min-width:1px) {
        /* sneaky trick to target just modern browsers */
       
        #contact fieldset br {
                display:none;
        }

        #contact fieldset div {
                float:left;
                width:50%;
                padding:0 0.5em 0.75em 11.5em;
                -webkit-box-sizing:border-box;
                box-sizing:border-box;
        }
       
        #contact fieldset div:nth-child(even) {
                padding:0 0 0.75em 12em;
        }
       
        #contact fieldset .hasTextArea {
                width:100%;
                padding-right:0;
        }
       
        #contact label {
                float:left;
                width:11em;
                padding-right:0.5em;
                margin-left:-11.5em;
                text-align:right;
        }
       
        #contact fieldset input,
        #contact fieldset textarea {
                width:100%;
                -webkit-box-sizing:border-box;
                box-sizing:border-box;
        }
       
        #contact .submitsAndHiddens {
                clear:both;
                padding-left:11.5em;
                text-align:right;
        }
       
        #contact .submitsAndHiddens p {
                float:left;
        }
       
}

@media (max-width:48em) {
        body {
                min-width:192px;
        }
        #contact {
                max-width:33em;
                margin:0 auto;
        }
        #contact fieldset div,
        #contact fieldset div:nth-child(even) {
                float:none;
                width:auto;
                padding:0 0 0.75em 11.5em;
        }
}

@media (max-width:25em) {
        #contact label {
                float:none;
                display:block;
                width:auto;
                margin:0;
                text-align:left;
        }
        #contact fieldset div,
        #contact fieldset div:nth-child(even) {
                padding:0 0 0.75em;
        }
        #contact .submitsAndHiddens {
                padding-left:0;
                text-align:center;
        }
       
        #contact .submitsAndHiddens p {
                float:none;
        }
       
}

---

Well the demo found here http://www.cutcodedown.com/for_other.../template.html works perfect on my phone.
I did not doubt that one minute.

Hi there theremotedr,

try replacing your "send_form_email.php" and "test-form.html" files
with those that may be found in the attachment. ;)

You should then be able to receive your emails. :D

coothead

Coothead.
That is the old form ?

I thought i was now using the form from Deathshadow.