In the codepen the words ‘Image search’ appear in one line, which is good. When I serve it via node/express on my local machine, ‘Image’ & ‘search’ appear on two different lines. Does anybody have any ideas on why this is?
html
<div class="center">
<div class="searchForm">
<h3>Image search</h3>
<form action="/search" method="post">
<textarea class="searchField" id="search" name="query" placeholder="What type of images are you looking for?"></textarea>
<input class="searchButton" type="submit" value="Search" />
</form>
</div>
</div>
Your .searchForm has a width of only 100px. Maybe try increasing that, or removing it?
Wrap your button with a div so it appears below the input form, instead of relying on the width to force it wordwrap/go below.
Thanks for the input! If I increase the width of .searchForm to 200px the contents move a little to left and the h3 tag still breaks at the space. If I get rid of the width entirely, the contents move entirely to left where they’re half off the page.
Putting a div around input was a great suggestion!