Textarea in form not respecting number of rows

Good morning, I’m working on a simple contact form for my site and it’s still showing only one row for the textarea. I’m not sure why. Any assistance would be greatly appreciated. The site is at:

http://www.markallanholley.com/contact.html

The line is:

The complete HTML/CSS follow:

<!DOCTYPE html>

<html>

	<head>
		<title>Mark Allan Holley - Designer</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" media="screen and (min-width: 900px)" href="../widescreen.css">
		<link rel="stylesheet" media="screen and (max-width: 900px)" href="../smallscreen.css">
		<link href="https://fonts.googleapis.com/css2?family=Forum&family=Patua+One&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> 
	</head>
	
	<body>
		<div class="container">			
				
				<div class="top">			
					<div class="logolink">
						<a href="../index.html"><img src="../links/mahlogo.png" width="140px" height="61px" class="responsive"></a>
				</div>
								
				<nav class="topnav">
					<ul>
						<li><a href="bio.html">Bio &nbsp &nbsp</a></li>
						<li><a href="contact.html">Contact &nbsp &nbsp</a></li>
						<li><a href="community/index.php">Community &nbsp &nbsp</a></li>
						<li><a href="login.html">Login &nbsp &nbsp</a></li>
						<li><a href="portfolio.html">Portfolio</a></li>
					</ul>
				</nav>
			</div>
			
			<section class="leftsection">
				<h1>Contact</h1>
				
				<p>If you prefer direct email, I can be reached at <a href="mailto:markallanholley@gmail.com">markallanholley@gmail.com</a>, or you’re welcome to use the form below.</p>

				<form class="contactform">
					<label for="yourname">Your Name:</label>
					 <input type="text" id="yourname" name="yourname" size=150> 
					 <br>
					 <label for="subject">Subject:</label>
					 <input type="text" id="subject" name="subject" size=150> 
					 <br>
					 <label for="message">Message:</label>
					 <input type="textarea" id="message" name="message" rows="12" cols="150">
					 <br>
					 <label for="email">Your Email Address:</label>
					 <input type="email" id="email" name="email" size=150> 
				</form>

			</section>

			<div class="divider">
				<img src="../links/verticaldivider.png" height="966" width="10">
			</div>

			<section class="rightsection">

			 <figure>
			 	<img src="../links/auburntransportationgrouplogo.png" alt="Auburn Transportation Group Logo" width="660" height="658" class="responsive"> 
			 	<figcaption>"Auburn Transportation Group Logo", Illustrator, 2019</figcaption>
			</figure>
			
			</section>
			
			<footer class="bottomnav">
				<ul>
					<li><a href="bio.html">Bio</a>&nbsp&nbsp</li>
					<li><a href="contact.html">Contact</a>&nbsp&nbsp</li>
					<li><a href="community/index.php">Community</a>&nbsp&nbsp</li>
					<li><a href="login.html">Login</a>&nbsp&nbsp</li>
					<li><a href="portfolio.html">Portfolio</a>&nbsp&nbsp</li>
					<li>&nbsp &nbsp Copyright 2020 Mark Holley</li>
				</ul>
			</footer>


				
			</footer>
		</body>
		</div>
</html>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

p {
	padding: 1em;
	font-size: 110%;
	font-family: 'Work Sans', sans-serif;
	letter-spacing: 1.5px;
	line-height: 150%;
}

h1 {
	padding-top: 1em;
	padding-left: .5em;
	font-family: 'Forum', cursive;
	font-size: 200%;
}


nav li {
	display: inline-block;
	list-style: none;
}

footer {
    grid-row: 3 / span 1;
    grid-column: 1 / span 3;
    margin: auto;
}

footer li {
	display: inline-block;
	list-style: none;
}

figcaption {
	margin-top: 5px;
	font-family: 'Work Sans', sans-serif;
	font-style: italic;
}

address {
	padding: 1em;
	font-size: 110%;
	font-family: 'Work Sans', sans-serif;
	margin: auto;
	text-align: center;
}

a {
	font-family: 'Work Sans', sans-serif;
	font-weight: normal;
	text-decoration: underline;
	color: purple;
}

label {
	font-family: "Work Sans", sans-serif;
	font-weight: bold;
	padding-left: 1em;
}

.container {
    display: grid;
    grid-template-columns: 1fr 10px 1fr;
    grid-row-gap: 5px;
    grid-column-gap: 5px;
}

.top {
    grid-row: 1 / span 1;
    grid-column: 1 / span 3;
    background-image: url("../links/topnavbackground.jpg");
}

.topnav {
    display: inline-block;
    grid-row: 1 / span 1;
    grid-column: 3 / span 3;
    float: right;
    margin: 10px;
    padding-top: 2em;
    padding-right: 1em;
}

.logolink {
	display: inline-block;
	margin: 20px;
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
}

.leftsection {
    grid-row: 2 / span 1;
    grid-column: 1 / span 1;

}

.divider {
    grid-row: 2 / span 1;
    grid-column: 2 / span 1;
    padding-top: 1em;
    padding-bottom: 1em;

}

.rightsection {
    padding: 1em;
    grid-row: 2 / span 1;
    grid-column: 3 / span 1;
    margin: auto;
}

.responsive {
  max-width: 100%;
  height: auto;
}

.bottomnav {
	font-family: 'Work Sans', sans-serif;
	font-size: 150%;
}

/* ADD THIS TO SMALLSCREEN TOO */

.contactform {
	 padding: 10px;
	 margin: 10px 0; /* add top and bottom margin */
}

input[type = text] {
  padding: 10px;
  margin:10px 0;
  border: 5px;
  background-color: #f2e6f7;
  border-radius:10px;
}

input[type = textarea] {
  padding: 10px;
  margin: 10px 0;
  border: 5px;
  background-color: #f2e6f7;
  border-radius:10px;
  width: 100%;
  height: auto;
  resize: vertical;
}

input[type = email] {
  padding: 10px;
  margin:10px 0;
  border: 5px;
  background-color: #f2e6f7;
  border-radius:10px;
}

/*img:hover {
	transform: scale(1.1);
}*/

/* unvisited link */
nav a:link {
	color: white;
	font-weight: normal;
	font-size: 150%;
	text-decoration: none;
}

/* visited link */
nav a:visited {
	color: white;
	font-weight: normal;
	font-size: 150%;
	text-decoration: none;
}

/* mouse over link */
nav a:hover {
	color: lightgray;
	font-weight: normal;
	font-size: 150%;
	text-decoration: none;
}

/* selected link */
nav a:active {
	color: lightpurple;
	font-weight: normal;
	font-size: 150%;
	text-decoration: none;
} 


/* Fonts from Google Fonts */

/*
    font-family: 'Forum', cursive;
    font-family: 'Patua One', cursive;
    font-family: 'Work Sans', sans-serif;

*/

Hello,

Are you sure that you want to use <input> and not <textarea> instead?

2 Likes

Oh gosh darn it to heck. :stuck_out_tongue:

You know what the worst part is? I’ve made that mistake before, I just didn’t remember that I had. Thank you so much. :slight_smile:

– Mark

2 Likes