Cannot center form with text on left

Question

Ok i have a form. i want the text on the left but the form itself to be in the center of my page. preferebly without using margins. iv put all my css in there aswell as the form itself and the javascript for the select buttons. now i have a website if you wanna test it for more information of the issue: https://thg-graphics.com/Enquiry.html

it also doesnt work properly on mobile. the select buttons dont wanna shrink...

I cant make the form center without the text centering and if i do there seems to be a margin somewhere that i cannot exactly find.....

issue: unable to center form with text on left. Select buttons dont work on mobile.

the bottom of my css controls the selection dropdowns the top dropdown css controls my menu dropdown that functions just fine but i stuck it in there incase you need it. also it uses w3.css.

The form does function though. its using a form to email php method to send me the information. the php is all working just as i mentioned i cannot make the form be center and text on the left.

Iv been working on this none stop trying to make it work properly since yesterday morning.... i am stuck and would really appreciate some help :D

/*Select Box js*/
$('.drop-menu').click(function() {
  $(this).attr('tabindex', 1).focus();
  $(this).toggleClass('active');
  $(this).find('.dropeddown').slideToggle(0);
});
$('.drop-menu').focusout(function() {
  $(this).removeClass('active');
  $(this).find('.dropeddown').slideUp(0);
});
$('.drop-menu .dropeddown li').click(function() {
  $(this).parents('.drop-menu').find('span').text($(this).text());
  $(this).parents('.drop-menu').find('input').attr('value', $(this).attr('id'));
});
/*End Select Box js*/


$('.dropeddown li').click(function() {
  var input = '<strong>' + $(this).parents('.drop-menu').find('input').val() + '</strong>',
    msg = '<span class="msg">Hidden input value is ';
  $('.msg').html(msg + input + '</span>');
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

div#container {
  position: relative;
  height: auto !important;
  min-height: 100%;
}

div#header {
  padding: 0em;
  position: relative;
  z-index: 2;
}

div#content {}

div#footer {
  position: absolute;
  width: 100%;
  bottom: 0;
}

body,
h1 {
  font-family: "Raleway", Arial, sans-serif
}

h1 {
  letter-spacing: 6px
}

.border {
  border: 1px solid #c3c3c3;
  display: inline-block;
}

.border2 {
  border: 1.2px solid #c3c3c3;
  display: inline-block;
}

.dropbtn {
  background-color: #FFFFFF;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: thin;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f6f6f6;
  min-width: 230px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #989898;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #ccc;
}

.required {
  color: #FF0004;
  position: absolute;
  display: inline-block;
}

.required2 {
  position: absolute;
}

.error {
  color: #FF0000;
  font-size: 35px;
}

.error2 {
  color: #FF0000;
  font-size: 46px;
}

.input2 {
  margin-top: 5px;
  width: 75%;
  max-width: 400px;
}

.coloursize {
  width: 75%;
  max-width: 400px;
  cursor: pointer;
}

.input3 {
  min-height: 116px;
  min-width: 400px;
}

.center {
  margin-left: 30px;
}

.footer2 {
  width: 100%;
  background-color: #E0E0E0;
}

.button1 {
  width: 100%;
}

.video {
  width: 100%;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.div {
  margin-left: 57.5%;
  display: none;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  z-index: 1;
  position: absolute;
}

.img:hover+div {
  display: block;
}

.error3 {
  position: absolute;
  z-index: 0;
}

#THG-width {
  padding: 20px;
  width: 70%;
}

@media only screen and (max-width: 480px) {
  #THG-width {
    padding: 20px;
    width: 100%;
  }
}

@media only screen and (max-width: 480px) {
  #THG-padding,
  h2 {
    font-size: 28px;
    padding-left: 1vw;
    padding-right: 1vw;
  }
}

@media only screen and (max-width: 480px) {
  #THG-padding2 {
    padding-left: 2vw;
    padding-right: 2vw;
  }
}

@media only screen and (max-width: 480px) {
  #THG-padding4 {
    padding-left: 3.5vw;
    padding-right: 3.5vw;
  }
}

.THG-center {
  text-align: center;
}

@media only screen and (max-width: 1100px) {
  #THG-padding3 {
    padding-left: 20%;
  }
}

@media only screen and (max-width: 700px) {
  #THG-padding3 {
    padding-left: 10%;
  }
}

@media only screen and (max-width: 800px) {
  #content {
    padding: 20px;
  }
}

@media only screen and (max-width: 800px) {
  #input3 {
    min-height: 80%;
    min-width: 50%;
  }
}

.box {
  display: inline-table;
  text-align: left;
}

.box3 {
  display: inline-block;
  text-align: left;
  width: 38%;
  margin-left: 10%;
}

.box2 {
  border: 2px solid grey;
  padding: 20px;
}

.padding2 {
  padding-left: 34.5%;
}

.width {
  width: 75%;
  max-width: 400px;
  height: 30px;
  cursor: pointer;
}

.cursor {
  cursor: pointer;
}

.jscolor {
  cursor: pointer;
}


/*Styling Selectbox*/

.drop-menu {
  width: 400px;
  display: inline-block;
  background-color: #fff;
  position: relative;
  font-size: 14px;
  color: #474747;
  text-align: center;
  margin-right: 4px;
}

.drop-menu .select {
  cursor: pointer;
  display: block;
  padding: 10px;
}

.drop-menu .select i {
  font-size: 13px;
  color: #888;
  cursor: pointer;
  float: right;
}

.drop-menu:hover {
  background-color: #ccc;
}

.drop-menu:active {
  background-color: #f8f8f8;
}

.drop-menu.active:hover,
.drop-menu.active {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  background-color: #f8f8f8;
}

.drop-menu .dropeddown {
  position: absolute;
  background-color: #fff;
  width: 100%;
  left: 0;
  margin-top: 1px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: none;
  overflow-y: auto;
  z-index: 9;
}

.drop-menu .dropeddown li {
  padding: 10px;
  cursor: pointer;
}

.drop-menu .dropeddown {
  padding: 0;
  list-style: none;
}

.drop-menu .dropeddown li:hover {
  background-color: #ccc;
  color: #00000;
}

.drop-menu .dropeddown li:active {
  background-color: #ccc;
  color: #00000;
}

.middle {
  text-align: left;
  align-content: center;
}

<form action="MailHandlerForm.php" method="post">
  <label>Name:</label>
  <br>
  <input name="name" type="text" class="input2" placeholder="Insert full name" pattern="[a-zA-Z\s0-9]{1,}" required />
  <a class="error required error3">*</a>
  <br>
  <label>Email Address:</label>
  <br>
  <input name="email" type="email" required class="input2" placeholder="Insert Email" value="" />
  <a class="error required error3">*</a>
  <br>
  <label>Please Select 3D or 2D:</label>
  <div>
    <div class="drop-menu">
      <div class="select border2">
        <span>Select</span>
      </div>
      <input type="hidden" name="Type">
      <ul class="dropeddown">
        <li id="Select">Select</li>
        <li id="3D">3D</li>
        <li id="2D">2D</li>
      </ul>
    </div>
  </div>
  Please Select Animated or static:<br>
  <div>
    <div class="drop-menu">
      <div class="select border2">
        <span>Select</span>
      </div>
      <input type="hidden" name="Statis_Animated">
      <ul class="dropeddown">
        <li id="Select">Select</li>
        <li id="Animated">Animated</li>
        <li id="Static">Static</li>
        <li id="Both">Both</li>
      </ul>
    </div>
  </div>
  <label>Text</label>
  <br>
  <input name="text" type="text" class="input2" placeholder="Text on Graphic/animation" value="">
  <br>
  <label>Text Font:</label>
  <br>
  <input name="font" type="text" class="input2 center" placeholder="Insert link(s) for font(s)" value="">
  <sub class="img"><img src="Images/help.png"></sub>
  <div class="div">Please make sure all fonts are free for commercial use.</div>
  <br>
  <label>Font size:</label>
  <br>
  <input name="fontsize" type="text" class="input2" placeholder="Font size(s)" value="">
  <br>
  <label>Text colour:</label>
  <br>
  <input name="textcolour" class="coloursize jscolor {closable:true,closeText:'Close!'}" style="width: 75%;" value="FF0000">
  <br>
  <label>Text/Object Bevel Colour:</label>
  <br>
  <input name="textobjectbevelcolour" class="coloursize jscolor {closable:true,closeText:'Close!'}" style="width: 75%;" value="FF0000">
  <br>
  <label>Background:</label>
  <br>
  <input name="background" type="text" class="input2" placeholder="Background(s)" value="">
  <br>
  <label>Background colour:</label>
  <br>
  <input name="backgroundcolour" class="coloursize jscolor {closable:true,closeText:'Close!'}" style="width: 75%;" value="FF0000">
  <br>
  <label>Effects:</label>
  <br>
  <input name="effects" type="text" class="input2 center" placeholder="Effects" value="">
  <sub class="img"><img src="Images/help.png"></sub>
  <div class="div">i.e Chrome, Shiny, Reflective, Glossy, etc.</div>
  <br>
  <label>Reference inspiration image(s)</label>
  <br>
  <input name="references" type="text" class="input2 center" placeholder="Insert reference link(s)" value="">
  <sub class="img"><img src="Images/help.png"></sub>
  <div class="div">To help the designer get a better understanding of your enquiry.</div>
  <br>
  <label>Additional Information:</label>
  <br>
  <textarea name="additional_information" cols="30" rows="5" class="input2 input3 center" id="input3" placeholder="Type here" title="Resizable Text Box"></textarea>
  <sup class="img"><img src="Images/help.png"></sup>
  <div class="div">For specific information. i.e I would like a yellow star in the top right.</div>


  <br>
  <div>
    <input type="hidden" class="checkbox" name="checkbox" value="no" required />
    <input type="checkbox" class="checkbox" id="checkbox" name="checkbox" value="yes" required />
    <label for="checkbox">I have read & accepted the <a title="Privacy Policy" href="privacypolicy.html" class="w3-hover-text-blue">Privacy Policy</a> &amp; <a title="Terms of use" href="TOS.html" class="w3-hover-text-blue">Terms of use</a></label>
    <a class="error2 required error3"><sup>*</sup></a>
  </div>
  <div class="w3-border w3-bar" style="width:75%; max-width:400px">
    <input class="w3-button button1" type="submit" value="Submit">
  </div>
</form>
<p>By submitting this obligation free enquiry&nbsp;you are agreeing to our <a title="Privacy Policy" href="privacypolicy.html" class="w3-hover-text-blue">Privacy Policy</a> &amp; <a title="Terms of use" href="TOS.html" class="w3-hover-text-blue">Terms of use</a>.
  <br> All information subbmitted will be kept confidential &amp; will <strong>NOT</strong> be made public.</p>
</div>

Your text and form inputs are all inline. If you want the text on the left of the form inputs, you will need some structure like a table or nested `divs` to block parts of your form. — Julio Feferman, Oct 19 '17 at 01:15
i want my text to be ontop of the form inputs but on the left side.. If i block the sides of the form then the more "padding" i add the more its gonna shrink on mobile. it needs to be big enough on mobile and big enough on desktop and if i use a @media to reduce some "padding" or "blocking" then its gonna screw up form. other then that iv managed to center it and what not but there seems to be invisible margins on the right side of some of the color pickers..... i also dont really wanna use margins cos then it just makes things more of a pain to deal with on mobile... — , Oct 19 '17 at 01:16
to make things worse i just found out that the 12 hours i spent on trying to turn a codepen into what i want was for nothing cos the select buttons dont work on mobile....... ughh this is driving me nuts. — , Oct 19 '17 at 01:23
I see what you do on the link provided. The container has `text-align:center` so everything will be centered. Try the following, wrap your form with `
` You might need to adjust the form dimensions. — Julio Feferman, Oct 19 '17 at 01:24
Your idea didnt work. it shrunk all the boxes for some reason.... also what do you mean by the container is? the only "container" line in the code is up top and doesnt mention it being center? — , Oct 19 '17 at 01:28
The elements in your form all inherit their text-align from the following rule `.w3-center {text-align: center!important;}`. The element with class `w3-center` is the container or parent element. Again, you can block your form and thus give it another style or block each label/input pair and give it a `text-align:left`. However, your issue may be further up the DOM structure, exactly how you are trying to center the page. The `text-align` style attribute will affect all inline elements, including text labels. You may want to investigate using `margin: 0 auto 0 auto` to center the page. — Julio Feferman, Oct 19 '17 at 01:39
nothing is working. i cant get anything to work. i managed to center it how i wanted but without using margins its damn near impossible. i really dont wanna use margins cos its a pain in the butt to make it work on every single screensize.... got any other ideas @jfeferman ? — , Oct 19 '17 at 04:42

score 0 · Answer 1 · answered Oct 19 '17 at 05:04

0

On the reference site, form elements are inheriting text-align:center from a parent container. Please try enclosing the form contents in a div to resolve text alignment and centering.

<form>
  <div style="text-align:left;width: 450px;margin: 0 auto 0 auto;">
    ... my form ...
  </div>
</form>

answered Oct 19 '17 at 05:04

Julio Feferman

2,658
3
15
26

i did that exact thing several different ways including yours and it works but it wont shrink when changing the screen size.... besides that my select buttons up top dont wanna shrink size along with the rest of the form. also that reference link is my website. – Oct 19 '17 at 06:01
Try using max-width:450px or @media query to define a width under a certain viewport size. – Julio Feferman Oct 19 '17 at 06:25
i dont wanna use padding, margins or anything that isnt "static" cos otherwise i need to use a ton of @media tags to make it suitable for mobile besides i dont like the thought of having a form move around lol. plus my titles for my help icons ( the little black box that pops up on mouse hover of those little icons, the black box isnt tied down) are also not tied down so if my form isnt in the correct location on every screen my little help icon thingos are not gonna be in the correct spot. this is really difficult. i cant make it work at all.... – Oct 19 '17 at 06:30
Sorry I can't seem to make this work. When I get stuck I usually try to break things down to the simplest components. Try first creating a general wireframe with a header, content and footer that will both center elements horizontally and make them responsive. One option is to use `display flex`. Check this post for a possible path [https://stackoverflow.com/questions/38544356/aligning-multiple-elements-in-html](https://stackoverflow.com/questions/38544356/aligning-multiple-elements-in-html) – Julio Feferman Oct 19 '17 at 14:29
1

ok well thanks for your time and help i greatly appreciate it. i havent got it working yet but i shall find a way. iv got a mate helping me tomorrow with it :D cheers have a good day. @jfeferman – Oct 20 '17 at 02:04
i got it working @jfeferman https://thg-graphics.com/Enquiry.html Ctrl + F5 to clear the cache so it loads correctly but it got it to work finally. – Oct 20 '17 at 05:22

Cannot center form with text on left

1 Answers1