Contact form in Developer Tools
Contact form on Chrome for Mobile
Upon examining the images, it becomes apparent that the CSS is not rendering correctly on the mobile device. Media queries are being utilized for styling on mobile platforms.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The viewport meta tag is already being used.
Any insights as to why this discrepancy may be occurring?
Here is the live webpage I am encountering issues with. It is a work in progress.
Edit:
This code snippet represents what was implemented initially. When pasted into a new HTML document, the CSS renders properly. However, when applied to the original page, the same CSS does not display correctly.
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet">
<link href="queries.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
</head>
<body>
<div class="contact-body-color">
<div class="row">
<div class="contact-body">
<form method="post" action="mailer.php" class="contact-form">
<div class="row">
<div class="">
<label for="fName lName">Name</label>
</div>
</div>
<div class="row">
<div class="first-name">
<input type="text" name="fName" id="fName" placeholder="First name" required>
</div>
<div class="last-name">
<input type="text" name="lName" id="lName" placeholder="Last name" required>
</div>
</div>
<div class="row">
<div>
<label for="email">Email</label>
</div>
<div class="">
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div>
<label for="find-us">Subject</label>
</div>
<div class="subject">
<input type="text" name="subject" id="subject" placeholder="Your subject" required>
</div>
</div>
<div class="row">
<div>
<label for="message">Message</label>
</div>
<div>
<textarea name="message" id="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="buttons">
<input type="submit" value="Send it!">
<input type="reset" value="Reset">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
min-width: 340px;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
/* ----- QUOTE ----- */
.contact-body {
width: 90%;
margin: 50px auto;
background-color: #92b296;
border-radius: 20px;
padding: 40px;
box-shadow: inset 0px 0px 20px #000000;
}
.contact-body-color {
background-color: #575367;
}
.contact-form {
width: 80%;
margin: 0 auto;
}
.contact-form .first-name {
float: left;
width: 50%;
}
.contact-form .last-name {
float: left;
width: 50%;
}
.contact-form .subject {
width: 50%;
}
.contact-form input[type=text] {
width: 90%;
padding: 8px;
}
.contact-form input[type=email] {
width: 45%;
padding: 8px;
}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
margin: 5px 0 15px 0;
border-radius: 6px;
border: none;
box-shadow: 0 4px 2px -2px #666;
}
.contact-form textarea {
height: 200px;
padding: 10px;
width: 100%;
}
.contact-form label {
font-weight: 400;
color: #333;
}
.contact-form input[type=submit],
.contact-form input[type=reset] {
padding: 10px;
border: none;
border-radius: 6px;
background-color: #be6876;
color: #fff;
box-shadow: 0 4px 2px -2px #666;
margin-right: 10px;
}
.contact-form input[type=submit]:active,
.contact-form input[type=reset]:active {
transform: translate(2px, 2px);
box-shadow: 0 2px 2px -2px #666;
}
Queries
/* Big tablets to 1200px (widths smaller than the 1140px row) */
@media only screen and (max-width: 1200px) {
.row { padding: 0 10px; }
}
/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px) {
/* ----- Contact Form ----- */
.contact-body {
width: 100%;
border-radius: 20px;
padding: 40px;
}
.contact-form {
width: 100%;
margin: 0 auto;
}
.contact-form .first-name,
.contact-form .last-name,
.contact-form .subject,
.contact-form input[type=text],
.contact-form input[type=email] {
float: none;
width: 100%;
}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
margin: 5px 0 15px 0;
}
.contact-form textarea {
height: 200px;
padding: 10px;
width: 100%;
}
.contact-form label {
font-weight: 400;
color: #333;
}
.contact-form input[type=submit],
.contact-form input[type=reset] {
padding: 20px;
margin: 0;
width: 48%;
}
.contact-form input[type=submit] {
margin-right: 2%;
}
.contact-form .buttons {
width: 80%;
margin: 0 auto;
}
}
/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {
.row {
padding: 0;
}
}
Edit 2:
An issue has been identified specifically with the Chrome browser for Android. Upon testing with Firefox on the mobile device, the website functions and appears as intended.