Check out this HTML form that I have put together.
@import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Roboto', sans-serif;
}
body{
background-image: url('bg.jpg');
...
I've noticed that when the status results from sending messages show up at the bottom of the page, the top portion disappears and you can't scroll back up. To see an example, I've created a JSFiddle here.
Although I'm not a UI expert, could someone please point out where the issue lies? See image https://i.sstatic.net/F0Umr.jpg
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
...
</div>
</div>
</form>
...