1 reply [Last post]
Nico1
Nico1's picture
Offline
newbie
Last seen: 31 weeks 6 days ago
Timezone: GMT+1
Joined: 2018-05-09
Posts: 1
Points: 2

Does anyone have any ideas about how to centre a form in CSS wordpress. I've tried every code on the planet and nothing works. This form at http://nicoscleaningservice.co.uk/work-with-us/ is so far to the right, it's falling off the page. Most CSS code online doesn't seem to do anything. Does anyone have a real, working CSS code to centre and to change height and size, not only of forms, but individuals items and boxes? Google captcha now also falling off the page too. I recon I've got the only drunk forms on the net.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 58 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9717
Points: 3793

Seriously??

Five megabytes to deliver a simple form?

                                                	Size	Uncompressed Size
4 Documents	                                        276 KB	318 KB
http://nicoscleaningservice.co.uk/work-with-us/#	110 KB	127 KB
http://nicoscleaningservice.co.uk/work-with-us/	        110 KB	127 KB
http://files.fm/upload_iframe.php?\
uid=15936292&uid_hash=e0048bdd78ade24b189b01912404aebe	 57 KB	64 KB
about:blank		
10 Images	                                         40 KB	40 KB
0 Objects		
91 Scripts	                                       2401 KB 2401 KB
97 Style Sheets	                                       2444 KB 2444 KB
202 Files	                                       5161 KB 5203 KB

It appears as if you've looked at every offering in the way of themes and plugins, and said, "Ooh, shiny." Then threw them at the wall. Any given page should call only those files it actually needs. You are using Bootstrap, one of the silliest ideas to come along. It adds a layer of abstraction on top of simple declarative languages. I could live with that, except that it depends on multiple classes on damned near everything and those elements have no relation to semantic markup. Both issues the height of stupid. Don't drink the Kool-Ade

Having your form buried in an iframe means the form itself is not yours to jack with. You need to modify its css on its (the form's) server. I had no desire to dig into that mess.

My default browser width is 1080px, which Bootstrap sets as an unnecessary default breakpoint for responsive rendering.

If your visitor has javascript disabled (it's a battery killer), or is using most non-graphical browsers, e.g. screen readers, Braille pads, or plain text browsers, like would be used by sys-admins on non-graphic OSes, they won't even see the form. It is stupidly written by the javascript. your hamburger menu avatar is also js powered, so no menu on phones etc..

I've written a version of your form that is fully functional and totally semantic for anyone using assistive technology. All you need to do is have the javascript set a hook or two to add bells and whistles.

Remember, the page should be fully functional before you add css or js.

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
    "width=device-width, height=device-height, initial-scale=1"
          name="viewport">
    <title>
      Test document
    </title>
    <style media="screen">
    /*<![CDATA[*/
 
    body, html {
	font: 100%/1.5 sans-serif;
	margin:0;
	padding: 0;
    }
 
    p {
	font-size: 1em;
    }
 
    h1, h2, h3 {
	font-family: serif;
    }
 
    h1 {
	text-align: center;
    }
 
    form {
	display: table;
	margin: auto;
    }
 
    label, fieldset {
	display: block;
	margin-bottom: 1em;
	}
 
    /*]]>*/
    </style>
  </head>
  <body>
    <h1>Form centering demo</h1>
    <form action="*"
	    method="post"
	    enctype="multipart/form-data">
      <fieldset>
	<legend>
	  Contact info
	</legend>
 
	<label for="name">Name
	  <input type="text"
		id="name"
		  name="name">
	</label>
 
	<label for="email">Email
	  <input type="text" 
	  id="email"
	  name="email">
	  <!--text covers older browsers, but w/o the verification -->
	</label>
      </fieldset>
 
      <fieldset>
	<legend>
	  File info
	</legend>
 
	<label for="subject">Subject
	  <input type="text"
		  id="subject"
		  name="subject">
	</label>
 
	<label for="description">
	  File description
	  <textarea id="description"
		  name="description">
	  </textarea>
	</label>
 
	<label for="files">Upload file(s)
	  <input type="file"
		  id="files"
		  name="files">
	</label>
      </fieldset>
 
      <label for="submit">
	<input type="submit"
		id="submit"
		name="submit">
      </label>
    </form>	
  </body>
</html>

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.