CODEWITHSUNDEEP
csswordpressresponsive-design
Mike.Whitehead
Mike.Whitehead

Reputation: 818

CSS - Form not re-sizing

I'm writing some media queries for a Wordpress site and I cant get my form to re-size with the page. I tested this on a front-end site which was the pre-cursor to the WP version and it worked but on the WP site it doesn't want to re-size. I've tried a few different ways to get it to re-size but it won't move. 

body {
  
  margin: 0 auto 0 auto;
  
}

.container {
    margin: auto;
    max-width: 100%;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

section#form, {
	height: 300px !important;
	max-width: 100%;
}


section#form h2 {
  font-size: 15px;
  margin-top: 50px;
  color: #000000;
}

span {
	color: #d3d3d3;
}
.phone img, .phone p, .email img, .email p {
  float: left;
}
.email, .phone {
  margin-top: 20px;
}
.phone p, .email p {
  font-size: 10px;
  margin: 5px 0 0 10px;
}

.phone img, .email img {
	height: 30px;
	width: 30px;
}

.phone::after, .email::after { /*clearfix*/
  content: '';
  display: table;
  clear: both;
}

section#form form {
  height: 200px;
  width: 600px;
  margin-top: 50px;
}

fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
}

section#form div.row {
  display: flex;
  max-width: 100%;
}

section#form div.row input {
  margin-left: 5px;
}
section#form div.row input:first-child {
  margin-left: 0;
}

section#form input[type=text],
section#form input[type=email] {
  background: #E8E8E8;
  font-size: 10px;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 0;
  margin-bottom: 5px;
  padding: 6px 12px;
}

section#form textarea {
  resize: none;
  font-size: 10px;
  background: #E8E8E8;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 6px 12px;
  margin-bottom: 5px;
}

section#form input[type=submit] {
  background: #1ba4dd;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  width: 100%;
  
}

input[type=submit]:hover {
  background: #00bfff;
}

@media screen and (max-width: 1000px) {
  div.container {
    float: none;
    margin: 0 ;
    width: calc(100% - 40px);
    box-sizing: border-box;
  }

  div.column {
    float: none;
   
  }
}

@media screen and (max-width: 480px) { 

  body {
    max-width: 500px;
    border: 1px dashed #ccc;
    min-height: 400px;
}

section#form {
    width: 100%;
    height: auto;
  }

  form  {

    height: auto;
    width: 100%;

  }


}
<body>
<section id="form">
        <div class="container">
            <div class="six columns">
                    <h2><span>To start getting great advice,</span> get in touch.</h2>
                        <div class="phone">
                            <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/phone.png">
                            <p>0113 220 5265</p>
                        </div>
                        <div class="email">    
                            <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/email.png">
                            <p>[email protected]</p>
                        </div>    
                        <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/Logo.png" style="width:250px;height:30px; margin-top: 20px;">
            </div>            
                <div class="six columns">
                    <form>
                        <fieldset>
                            <div class="row">
                                    <input name="name" type="text" required placeholder="NAME">
                                    <input name="email" type="email" required placeholder="EMAIL">
                            </div>
                            <input name="subject" type="text" placeholder="SUBJECT">
                            <textarea rows="8" placeholder="MESSAGE..."></textarea>
                        </fieldset>
                            <input type="submit" value="SUBMIT">
                    </form>
                </div>
        </div>    
    </section>
</body>

I need it to resize within the page. It worked first time on the front-end version but now it won't. Any assistance appreciated.

Upvotes: 1

Views: 917

Answers (2)

the_lorem_ipsum_guy
the_lorem_ipsum_guy

Reputation: 474

section#form form {
  height: 200px;
  width: 100%;
  margin-top: 50px;
}

You can use Bootstrap Form for easier and faster way of doing this.

Upvotes: 1

Chrisstar
Chrisstar

Reputation: 646

You used fixed vales at one point. If you change this:

section#form form {
      height: 200px;
      width: 600px;
      margin-top: 50px;
}

to this:

section#form form {
      height: 200px;
      margin-top: 50px;
}

It should work:

body {
  
  margin: 0 auto 0 auto;
  
}

.container {
    margin: auto;
    max-width: 100%;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

section#form, {
	height: 300px !important;
	max-width: 100%;
}


section#form h2 {
  font-size: 15px;
  margin-top: 50px;
  color: #000000;
}

span {
	color: #d3d3d3;
}
.phone img, .phone p, .email img, .email p {
  float: left;
}
.email, .phone {
  margin-top: 20px;
}
.phone p, .email p {
  font-size: 10px;
  margin: 5px 0 0 10px;
}

.phone img, .email img {
	height: 30px;
	width: 30px;
}

.phone::after, .email::after { /*clearfix*/
  content: '';
  display: table;
  clear: both;
}

section#form form {
  height: 200px;
  margin-top: 50px;
}

fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
}

section#form div.row {
  display: flex;
  max-width: 100%;
}

section#form div.row input {
  margin-left: 5px;
}
section#form div.row input:first-child {
  margin-left: 0;
}

section#form input[type=text],
section#form input[type=email] {
  background: #E8E8E8;
  font-size: 10px;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 0;
  margin-bottom: 5px;
  padding: 6px 12px;
}

section#form textarea {
  resize: none;
  font-size: 10px;
  background: #E8E8E8;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 6px 12px;
  margin-bottom: 5px;
}

section#form input[type=submit] {
  background: #1ba4dd;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  width: 100%;
  
}

input[type=submit]:hover {
  background: #00bfff;
}

@media screen and (max-width: 1000px) {
  div.container {
    float: none;
    margin: 0 ;
    width: calc(100% - 40px);
    box-sizing: border-box;
  }

  div.column {
    float: none;
   
  }
}

@media screen and (max-width: 480px) { 

  body {
    max-width: 500px;
    border: 1px dashed #ccc;
    min-height: 400px;
}

section#form {
    width: 100%;
    height: auto;
  }

  form  {

    height: auto;
    width: 100%;

  }


}
<body>
<section id="form">
        <div class="container">
            <div class="six columns">
                    <h2><span>To start getting great advice,</span> get in touch.</h2>
                        <div class="phone">
                            <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/phone.png">
                            <p>0113 220 5265</p>
                        </div>
                        <div class="email">    
                            <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/email.png">
                            <p>[email protected]</p>
                        </div>    
                        <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/07/Logo.png" style="width:250px;height:30px; margin-top: 20px;">
            </div>            
                <div class="six columns">
                    <form>
                        <fieldset>
                            <div class="row">
                                    <input name="name" type="text" required placeholder="NAME">
                                    <input name="email" type="email" required placeholder="EMAIL">
                            </div>
                            <input name="subject" type="text" placeholder="SUBJECT">
                            <textarea rows="8" placeholder="MESSAGE..."></textarea>
                        </fieldset>
                            <input type="submit" value="SUBMIT">
                    </form>
                </div>
        </div>    
    </section>
</body>

Upvotes: 0

Related Questions