HTML CSS onscreeen keyboad causes elements to overlap? - html

I am not a html or css developer but I need to create a one of html page. It looks fairly right only I want work a few things out.
My first issue is that I cant remove the light grey box around my embeded image, I'm of the understanding this is my padding but even with it set to 0px as well as the borer and margin set to 0px I have had no luck?
The second issue I have is that when used on a smartphone the logo, textboxes and button condense toward eachother and overlap... the cause of this is tyhe keyboad that pops up the solution iscompleatly unknowen to me.
the code is as follows:
.ApplicationLogo {
position: absolute;
top: 27%;
left: 50%;
width: 120px;
height: 120px;
margin-left: -60px;
/* Half the width */
margin-top: -60px;
/* Half the height */
content: no-repeat;
background-image: url('data:image/png;base64,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');
}
.LoginField {
position: absolute;
top: 50%;
left: 50%;
width: 350px;
height: 600px;
margin-left: -175px;
/* Half the width */
margin-top: -300px;
/* Half the height */
border-radius: 25px;
opacity: 0.5;
background-color: #D3D3D3;
}
.UsernameTextbox {
position: absolute;
top: 45%;
left: 50%;
width: 285px;
height: 50px;
margin-left: -148px;
/* Half the width */
margin-top: -25px;
/* Half the height */
background-color: #ffffff;
/* Font Styling */
font-size: 18px;
text-align: center;
color: #A9A9A9;
/* Textbox Boarder Styling */
border: 3px solid #A9A9A9;
border-radius: 10px;
}
.UsernameTextbox:hover {
/* Font Styling */
font-size: 18px;
text-align: center;
color: #ff8000;
}
.UsernameTextbox:hover::placeholder {
color: transparent;
}
.PasswordTextbox {
position: absolute;
top: 57%;
left: 50%;
width: 285px;
height: 50px;
margin-left: -148px;
/* Half the width */
margin-top: -25px;
/* Half the height */
background-color: #ffffff;
/* Font Styling */
font-size: 18px;
text-align: center;
color: #A9A9A9;
/* Textbox Boarder Styling */
border: 3px solid #A9A9A9;
border-radius: 10px;
}
.PasswordTextbox:hover::placeholder {
background-color: #ffffff;
color: transparent;
}
.PasswordTextbox:hover {
/* Font Styling */
font-size: 18px;
text-align: center;
background-color: #ffffff;
color: #ff8000;
}
.PasswordTextbox:hover::placeholder {
color: transparent;
}
.LoginButton {
position: absolute;
top: 75%;
left: 50%;
width: 295px;
height: 50px;
margin-left: -148px;
/* Half the width */
margin-top: -25px;
/* Half the height */
background-color: #4CAF50;
/* Font Styling */
font-size: 18px;
text-align: center;
color: white;
/* Textbox Boarder Styling */
border: 3px solid #A9A9A9;
border-radius: 10px;
}
.LoginButton:hover {
background-color: #45a049;
}
.CopyrightFooter {
position: absolute;
top: 97%;
left: 50%;
width: 350px;
height: 50px;
margin-left: -175px;
/* Half the width */
/* Font Styling */
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #A9A9A9;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body id="BackgroundImage">
<div class="LoginField"></div>
<img class="ApplicationLogo" />
<form method="POST" action="Confirm_Login">
<div class="LogInControlls">
<input class="UsernameTextbox" type="text" name="MYUSERNAME" placeholder="Username" required><br>
<input class="PasswordTextbox" type="password" name="MYPASSWORD" placeholder="Password" required><br>
<input class="LoginButton" type="submit" value="Login">
</div>
</form>
<div class="CopyrightFooter">van Tuyl Systems copyright © 2021</div>
</body>
</html>

Related

Positioning issue with contact form (trying to centre)

I need help with what is the best way to fully centre the contact form in the middle of the background image no matter what view the contact form is in(desktop, tablet, mobile). I would like for there to be a smallish amount of space between the bottom and top of the contact form, however, I would like the sides of the form to be further away from the edges of the image.
I hope yous understand what I'm asking for and thanks in advance.
The contact form can be seen on the live url: http://nathan-bayne.co.uk/index1
#contact-section {
background-color: #bce4b8; /* Previous colour that Aileen liked (#A74CAB) */
border-bottom: 1px solid #000;
text-align: center;
padding: 100px 0 0;
min-height: 800px;
width: 100%;
} /* Adjusts section sizing, padding and text alignment */
.contact-section-content {
margin-left: 14%;
margin-right: 14%;
margin-top: 2%;
}
::-webkit-input-placeholder {
text-align: center;
}
.bg-img {
/* The image used */
background-image: url("https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
min-height: 750px;
border-radius: 35px;
margin-top: 2%;
margin-bottom: 3%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
border: 1px solid black;
} /* Sets background image behind contact form, sets sizing, positioning and styles the image */
.contact-section-content .container {
max-width: 60%;
padding: 2%;
background-color: white;
border-radius: 35px;
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
border: 1px solid white;
margin-top: 1%;
} /* Sets sizing, styling and positioning of the contact form container */
.container label {
font-size: 2em;
color: white;
} /* Sets sizing of the contact form titles */
.container textarea {
height: 125px;
width: 100%;
border-radius: 35px;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
} /* Sets sizing, positioning and styling of the contact form text area */
input[type="text"] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
border-radius: 35px;
} /* Sets sizing, positioning and styling of the input tags for the contact form */
input[type="tel"] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
border-radius: 35px;
} /* Sets sizing, positioning and styling of the input tags for the contact form */
.contact-section-content button {
font-size: 2em;
padding: 0.6% 6%;
border-radius: 35px;
color: #fff;
background-color: #339a9a;
border: 1px solid black;
cursor: pointer;
text-align: center;
/* clear: both; May not need this included */
margin-left: 0%;
margin-top: 1%;
} /* Styles the contact form submission button */
.contact-section-content button:hover {
color: rgb(255, 255, 255);
background-color: #004e4f;
border: 2px solid white;
} /* Styles the contact form submission button when you hover over it */
.container input::-webkit-input-placeholder {
font-size: 1.5em;
line-height: 2;
} /* Sets sizing of the contact form input placeholders */
.container textarea::placeholder {
font-size: 1.5em;
line-height: 2;
} /* Sets sizing of the contact form textarea placeholders */
#media only screen and (max-width: 1606px) {
.contact-section-content {
margin-left: 2.5%;
margin-right: 2.5%;
margin-bottom: 6%;
}
::-webkit-input-placeholder {
text-align: center;
}
.bg-img {
/* The image used */
background-image: url("https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
min-height: 750px;
border-radius: 35px;
margin-top: 2%;
margin-bottom: 3%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
} /* Sets background image behind contact form, sets sizing, positioning and styles the image */
.contact-section-content .container {
max-width: 70%;
padding: 2%;
background-color: white;
border-radius: 35px;
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
border: 1px solid white;
margin-top: 1.5%;
} /* Sets sizing, styling and positioning of the contact form container */
.container label {
font-size: 2em;
color: white;
} /* Sets sizing of the contact form titles */
.container textarea {
height: 125px;
width: 100%;
border-radius: 35px;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
} /* Sets sizing, positioning and styling of the contact form text area */
input[type="text"] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
border-radius: 35px;
} /* Sets sizing, positioning and styling of the input tags for the contact form */
input[type="tel"] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
border-radius: 35px;
} /* Sets sizing, positioning and styling of the input tags for the contact form */
.contact-section-content button {
padding: 1% 8%;
font-size: 1.8em;
} /* Styles the contact form submission button */
}
#media only screen and (max-width: 815px) {
.contact-section-content {
margin-left: 2.5%;
margin-right: 2.5%;
margin-top: 10%;
margin-bottom: 15%;
}
::-webkit-input-placeholder {
text-align: center;
}
.bg-img {
/* The image used */
background-image: url("https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
min-height: 670px;
border-radius: 35px;
margin-top: 2%;
margin-bottom: 3%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
} /* Sets background image behind contact form, sets sizing, positioning and styles the image */
.bg-img form {
margin-bottom: 7.5%;
} /* Sets background image behind contact form, sets sizing, positioning and styles the image */
.contact-section-content .container {
max-width: 85%;
padding: 2%;
background-color: white;
border-radius: 35px;
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
border: 1px solid white;
margin-top: 1.5%;
} /* Sets sizing, styling and positioning of the contact form container */
.container label {
font-size: 2em;
color: white;
} /* Sets sizing of the contact form titles */
.container textarea {
height: 125px;
width: 100%;
border-radius: 35px;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
} /* Sets sizing, positioning and styling of the contact form text area */
input[type="text"] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
border-radius: 35px;
} /* Sets sizing, positioning and styling of the input tags for the contact form */
input[type="tel"] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
border-radius: 35px;
} /* Sets sizing, positioning and styling of the input tags for the contact form */
.contact-section-content button {
padding: 1% 8%;
font-size: 2em;
margin-bottom: 4%;
} /* Styles the contact form submission button */
.container input::-webkit-input-placeholder {
font-size: 1.5em;
line-height: 2;
} /* Sets sizing of the contact form input placeholders */
.container textarea::placeholder {
font-size: 1.5em;
line-height: 2;
} /* Sets sizing of the contact form textarea placeholders */
}
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />
<section id="contact-section">
<div class="contact-section-content">
<div class="bg-img"><br><br>
<form action="/action_page.php" class="container">
<label for="psw"><b>Name</b></label>
<input type="text" placeholder="Enter Name" name="psw" required>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="number"><b>Mobile Number</b></label>
<input type="tel" name="contact_number" placeholder="Mobile Number" pattern="[0-9]{11}"/>
<label for="psw"><b>Contact Summary</b></label>
<textarea name="subject" placeholder="Write a short summary about what you're in need of help with.." required></textarea>
<button type="submit">Submit Form</button>
</form>
</div>
</div>

Just add this to.bg-img :
display: flex; align-items: center;
And set margin-top: 0 for .container

Try to add this to your .bg-image class
.bg-img {
background-image: url("https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
min-height: 750px;
border-radius: 35px;
margin-top: 2%;
margin-bottom: 3%;
display : flex ;
flex-direction : row;
align-items : center;
justify-content: center;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
border: 1px solid black;
}
what I added is display:flex and justify-content/align-items : center to center any element inside that container

Issue with unwanted Scroll bar

The problem I am having is that I have a margin or a container somewhere that is creating an unwanted scroll bar horizontally on the bottom of my webpages. I am using my contact page since it is my page with the least amount of content, even though I am having the issue across all of my other 5 pages linked on this website. I know it will be something simple and would love an extra pair of eyes who could maybe shed some light onto where the issue is. Thanks in advance. Please let me know if there is anything else I can provide for further details. Thanks in advance.
<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>index.html</title>
<link href="css/style.css" rel="stylesheet" type="text/css"><link rel="preconnect"
href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lora:wght#500&display=swap" rel="stylesheet">
</head>
<div class="IMGLogo">
<img src="images/RJL photography_Logo.svg" alt="LOGO" width="370.026" height="65.492" ></div>
<div id="wrapper">
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<!--
Too bad the menu has to be inside of the button
-->
<ul id="menu">
<li>Home</li>
<li>Projects</li>
<li>Lofts</li>
<li>Balcony/Rooftop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div>
<main>
<br>
<br><h1>Contact</h1>
<p class="pbox"> The folks at RJL Photography are eager to make your moments last a lifetime. Inquire
below.</p>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<div class="card">
<img src="images/New/Contact/RyanBio.JPG" alt="Ryan Bio" style="width:100%">
<h1>Ryan Luber</h1>
<p class="title">CEO & Founder, RJL Photography</p>
<p>Frederick, MD</p>
<p>443-222-3333</p>
<p>RJLPhoto#RJLP.COM</p>
<i class="fa fa-dribbble"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-facebook"></i>
</div>
<br>
<div class="container">
<form action="action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="pnumber">Phone Number</label>
<input type="text"
id="pnumber"
name="phonenumber"
placeholder="Your phone number..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Description of your desired Photoshoot."
style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</main>
<!--wrapper--></div>
<footer>© RJLPhotography 2020 </footer>
</html>
wrapper {
margin: auto;
width: 100%;
}
body {
align-content: center;
margin-top: 0;
margin-left: 30;
margin-bottom: 0;
}
article {
background-image: url("../images/BAR.svg");
width: 82%;
padding: 20px;
position: relative;
background-repeat: no-repeat;
background-position: center;
}
h1 {
font-family: 'Lora', serif;
}
h2 {
height: 10em;
display: flex;
align-items: center;
justify-content: center;
margin-left: -200px;
}
/* Container holding the image and the text */
.container {
position: relative;
}
/* Bottom right text */
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
body {
margin: 20px;
position: relative;
/* make it look decent enough */
background: white;
color: gray;
}
.IMGLogo {
margin: 0 0 0 0;
width: 370.026px;
height: 65.492px;
position: absolute;
left: 40px;
top: -40px;
}
p.pbox {
margin-left: 400px;
margin-right: 400px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
img {
/*display: block;
object-fit:cover;
*/
width: 80%;
height: 90%;
margin-top: 80px;
margin-right: 80px;
margin-left: 0;
margin-bottom: 80px;
max-width: 1000px;
border-radius: 8px;
}
.center {
/*display: block;*/
margin-left: auto;
margin-right: auto;
width: 76%;
}
main {
padding-left: 65px;
position: static;
margin-top: 40px;
width: 100%;
}
#BARcenter {
width: 60%;
height: 100%;
position: relative;
top: -100px;
left: 60px;
z-index: 50;
}
#BARcenter img {
width: 40%;
height: 40%;
}
#menuToggle {
display: block;
position: relative;
top: 130px;
left: 30px;
z-index: 100;
-webkit-user-select: none;
user-select: none;
right: auto;
}
#menuToggle a {
text-decoration: none;
color: white;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: tomato;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
/* hide this */
z-index: 2;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5)!important;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked~ul {
transform: none;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
}
.title {
color: black;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover,
a:hover {
opacity: 0.4;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #ccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px;
/* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
resize: vertical/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: black;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: gray;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
footer {
text-align: center;
}
#myBtn {
display: none;
/* Hidden by default */
position: fixed;
/* Fixed/sticky position */
bottom: 0px;
/* Place the button at the bottom of the page */
left: 30px;
/* Place the button 30px from the right */
z-index: 99;
/* Make sure it does not overlap */
border: none;
/* Remove borders */
outline: none;
/* Remove outline */
background-color: black;
/* Set a background color */
color: white;
/* Text color */
cursor: pointer;
/* Add a mouse pointer on hover */
padding: 25px;
/* Some padding */
border-radius: 10px;
/* Rounded corners */
font-size: 18px;
/* Increase font size */
}
#myBtn:hover {
background-color: #555;
/* Add a dark-grey background on hover */
}

On your main tag remove
padding-left: 65px;
and on your MenuToggle remove
left: 30px;
That fixes your issue of having an horizontal scroll bar.
You will then have to have a play about with your hamburger menu and contact text.
Try using position absolute rather than relative on your menuToggle.

Auto height problem in responsive web design

I am making a responsive login page and i did everything correctly this is my html code
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #c6faff;
font-family: Segoe WP Black;
}
.form-box {
position: absolute;
width: 715px;
height: auto;
min-height: 400px;
background-image: linear-gradient(to right top, #051937, #10325f, #184f8b, #1b6dba, #128deb);
opacity: .8;
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
border-radius: 5px;
color: black;
}
.form-left-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
background-color: #fff1ff;
height: 100%;
min-height: 400px;
padding: 7px;
border: 3px solid black;
color: black;
}
.form-right-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
height: 100%;
padding-left: 15px;
min-height: 400px;
background-color: #fff1ff;
padding: 7px;
border: 3px solid black;
border-left: none;
color: black;
padding-left: 10px;
}
.text-field {
margin-top: 20px;
border: none;
outline: none;
opacity: .9;
padding: 7px;
background: none;
border-bottom: 2px solid #2196F3;
transition: .5s;
}
.submit {
background-image: linear-gradient(to right, #ed00af, #f81795, #fc327f, #fb496c, #f65e5e);
color: white;
padding: 7px;
width: 160px;
height: 50px;
font-size: 15px;
border: 2px solid grey;
font-weight: bold;
font-family: Segoe WP Black;
cursor: pointer;
transition: .7s;
outline: none;
border-radius: 20px 0px 20px 0px;
}
.text-field:focus {
padding: 8px;
border-bottom: 3px solid black;
font-size: 16px;
}
.submit:hover {
border-radius: 0px 20px 0px 20px;
box-shadow: 5px 10px 20px rgb(0, 0, 0, .3);
width: 170px;
height: 60px;
transition: .7s;
}
.text-field::placeholder {
color: black;
opacity: 1; /* Firefox */
font-size: 13px;
}
.text-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
.text-field::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
#media screen and (max-width: 730px) {
.form-box {
width: 100%;
height: auto;
min-height: 0;
left: 0;
bottom: 0;
transform: translate(-0, 0);
}
.form-left-side {
position: relative;
width: 97.1%;
float: none;
display: block;
max-width: none;
min-height: 300px;
height: auto;
text-align: center;
}
.form-right-side {
position: relative;
width: 96.7%;
float: none;
display: block;
border-left: 3px solid black;
max-width: none;
}
.text-field {
width: 70%;
}
}
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, intital-scale=1">
</head>
<body>
<div class="form-box">
<div class="form-left-side">
<center><h2 style="font-size:20px;">Register For Best Performance</h2>
<p>When You Register at This Site You Can Use Our Features
And Have The Best Performance Here Thank You For Joining Us!<br>
Never Foget This You Can Do Anything at This Site And
This is For Everyone And We Won't do Building a Website For Just Somebody !
</p>
</center>
</div>
<div class="form-right-side">
<h2>Login</h2>
<form>
<label for="fname">Username: </label><br><center>
<input type="text" name="fname" value="" class="text-field" placeholder="Username" />
<br /><br /><br></center>
<label for="fname">Password: </label>
<br /><center>
<input type="password" name="password" value="" class="text-field" placeholder="Password" />
<br><br><br></center>
<center><input type="submit" name="submit" value="Submit" class="submit">
<br></center>
</form>
</div>
</div>
</body>
</html>
When I resize the screen down to 730 pixel that works correct but my text in form-left-side goes up and there is not something that I can scroll and my text first lines are not visible
notice that i don't wanna take my min-height to lower and i want it to be 300 px if you can help me thank you
and loook also when it is runing on snippet on this site you can not scroll up so that is a problem
and my browser is opera

Your problem happens because you are absolutely positioning from the bottom of the page, changing it to top solves the problem. :)
Also you can add position: relative to your media query, to make sure it won't go out of screen. :)
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #c6faff;
font-family: Segoe WP Black;
}
.form-box {
position: absolute;
width: 715px;
height: auto;
min-height: 400px;
background-image: linear-gradient(to right top, #051937, #10325f, #184f8b, #1b6dba, #128deb);
opacity: .8;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
color: black;
}
.form-left-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
background-color: #fff1ff;
height: 100%;
min-height: 400px;
padding: 7px;
border: 3px solid black;
color: black;
}
.form-right-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
height: 100%;
padding-left: 15px;
min-height: 400px;
background-color: #fff1ff;
padding: 7px;
border: 3px solid black;
border-left: none;
color: black;
padding-left: 10px;
}
.text-field {
margin-top: 20px;
border: none;
outline: none;
opacity: .9;
padding: 7px;
background: none;
border-bottom: 2px solid #2196F3;
transition: .5s;
}
.submit {
background-image: linear-gradient(to right, #ed00af, #f81795, #fc327f, #fb496c, #f65e5e);
color: white;
padding: 7px;
width: 160px;
height: 50px;
font-size: 15px;
border: 2px solid grey;
font-weight: bold;
font-family: Segoe WP Black;
cursor: pointer;
transition: .7s;
outline: none;
border-radius: 20px 0px 20px 0px;
}
.text-field:focus {
padding: 8px;
border-bottom: 3px solid black;
font-size: 16px;
}
.submit:hover {
border-radius: 0px 20px 0px 20px;
box-shadow: 5px 10px 20px rgb(0, 0, 0, .3);
width: 170px;
height: 60px;
transition: .7s;
}
.text-field::placeholder {
color: black;
opacity: 1; /* Firefox */
font-size: 13px;
}
.text-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
.text-field::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
#media screen and (max-width: 730px) {
.form-box {
width: 100%;
height: auto;
min-height: 0;
left: 0;
top: 0;
transform: translate(0, 0);
position: relative;
}
.form-left-side {
position: relative;
width: 97.1%;
float: none;
display: block;
max-width: none;
min-height: 300px;
height: auto;
text-align: center;
}
.form-right-side {
position: relative;
width: 96.7%;
float: none;
display: block;
border-left: 3px solid black;
max-width: none;
}
.text-field {
width: 70%;
}
}
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, intital-scale=1">
</head>
<body>
<div class="form-box">
<div class="form-left-side">
<center><h2 style="font-size:20px;">Register For Best Performance</h2>
<p>When You Register at This Site You Can Use Our Features
And Have The Best Performance Here Thank You For Joining Us!<br>
Never Foget This You Can Do Anything at This Site And
This is For Everyone And We Won't do Building a Website For Just Somebody !
</p>
</center>
</div>
<div class="form-right-side">
<h2>Login</h2>
<form>
<label for="fname">Username: </label><br><center>
<input type="text" name="fname" value="" class="text-field" placeholder="Username" />
<br /><br /><br></center>
<label for="fname">Password: </label>
<br /><center>
<input type="password" name="password" value="" class="text-field" placeholder="Password" />
<br><br><br></center>
<center><input type="submit" name="submit" value="Submit" class="submit">
<br></center>
</form>
</div>
</div>
</body>
</html>

Different result for different browser with CSS

I have different results for different browsers in the following code:
.flexsearch--wrapper {
height: auto;
width: 50%;
max-width: 700px;
min-width: 100px;
top: 20px;
overflow: hidden;
background: transparent;
margin: 1px;
position: absolute;
}
.flexsearch--form {
overflow: hidden;
position: relative;
}
.flexsearch--form {
padding: 0 66px 0 0;
/* Right padding for submit button width */
overflow: hidden;
}
.flexsearch--input {
width: 100%;
}
.flexsearch {
padding: 0 25px 0 200px;
/* Padding for other horizontal elements */
}
.flexsearch--input {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 30px;
padding: 0 46px 0 10px;
border-color: #888;
border-radius: 3px;
/* (height/2) + border-width */
border-style: solid;
border-width: 2px;
/*margin-top: 10px;*/
color: #333;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
-webkit-appearance: none;
-moz-appearance: none;
}
.flexsearch--submit {
position: absolute;
right: 0;
top: 0;
display: block;
width: 32px;
height: 32px;
padding: 0;
border: none;
margin-top: 4px;
/* margin-top + border-width */
margin-right: 5px;
/* border-width */
background: transparent;
color: #888;
font-family: 'Helvetica', sans-serif;
font-size: 30px;
line-height: 30px;
-webkit-appearance: none;
-moz-appearance: none;
}
.flexsearch--input:focus {
outline: none;
border-color: #333;
}
.flexsearch--input:focus.flexsearch--submit {
color: #333;
}
.flexsearch--submit:hover {
color: #333;
cursor: pointer;
}
/* UPLOAD ICON IMAGE */
#uploadIcon {
/*width: 10%;
height: 100%;*/
padding-top: 10px;
min-width: 80px;
max-width: 80px;
position: absolute;
margin: 0 1% 0 77%;
/* left : 77%;*/
top: -3px;
}
/* SIGN UP / SIGN IN*/
.Signin {
position: fixed;
/*left: 85%;*/
margin-left: 86%;
top: 24px;
/*border : 1.5px solid grey;*/
padding: 3px;
margin-right: 2px;
float: right;
}
/*#Signup {
position: absolute;
left: 93%;
top: 20px;
border : 1.5px solid grey;
padding: 3px;
margin-right: 3px;
}
*/
<div class="flexsearch">
<div class="flexsearch--wrapper">
<form class="flexsearch--form" action="#" method="post">
<div class="flexsearch--input-wrapper">
<input class="flexsearch--input" type="search" placeholder="search">
</div>
<input class="flexsearch--submit" type="submit" value="➜" />
</form>
</div>
</div>
<img src="upload_icon.png" id = "uploadIcon">
Sign In/Sign Up
<!-- Sign Up -->
The problem is that arrow and the Sign In and Sign Up with Firefox works perfectly :
But with Chrome or Safari it doesn't:
Is the problem from my code? or do I need to add some customized code for each browser. And if yes, how can that be done? Can it be done with -webkit or -moz Because I tried this, but it didn't work. Probably, I haven't written it well.

Form inputs showing behind image

The form/input keeps showing up behind the img #iphone. I tried adjusting z-index and changing position to relative. The z-index is correct on JSfiddle: jsfiddle.net/3uLUj, but not on my site or locally: evanwknight.com/United-Redesign Thanks!
<div id="form">
<form action="index.php" method="post">
<input type="text" name="name" placeholder="enter first and last name" >
<br />
<input type="image" value="Submit" src="submit-1.gif" id="submit"/>
</form>
</div>
#iphone {
position: absolute;
top: 50%;
left: 50%;
margin-top: -350px; /* Half the height */
margin-left: -266px; /* Half the width */
z-index: -100;
}
#form {
position: absolute;
z-index: 9999;
}
input {
position: absolute;
text-align: center;
font-size: 30px;
width: 200px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 5px solid #cccccc;
padding: 15px;
background: rgba(255,255,255,0.5);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px; /* future proofing */
-khtml-border-radius: 2px; /* for old Konqueror browsers */
z-index: 9999;
}

I've looked at your site and if I'm understanding you correctly you want the form to appear inside the iPhone and on top of the image. If so, try replacing your the relevant style declarations in your style.css file with these:
#form {
text-align: center;
color: #193485;
font-family: Arial;
}
#iphone {
position: absolute;
top: 50%;
left: 50%;
margin-top: -350px; /* Half the height */
margin-left: -266px; /* Half the width */
z-index: -100;
}
#plain {
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px; /* Half the height */
margin-left: -177px; /* Half the width */
z-index: 100;
}
#form {
position: absolute;
z-index: 9999;
height: 600px;
width: 354px;
top: 50%; left: 50%; margin-top: -200px; margin-left: -177px;
}
input {
text-align: center;
font-size: 30px;
width: 200px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 5px solid #cccccc;
padding: 15px;
background: rgba(255,255,255,0.5);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px; /* future proofing */
-khtml-border-radius: 2px; /* for old Konqueror browsers */
z-index: 9999;
}
You can test is out on this fiddle

In your page evanwknight.com/United-Redesign:
div#form has margin-top: -500px, therefore it is out of the screen (style.css: line 21)
input#submit has display: none. (style.css: line 99)

Kindly have a look at the js fiddle demo .
Are you looking for this ?
Js Fiddle Demo
<div id="form">
<form action="index.php" method="post">
<input type="text" name="name" placeholder="enter first and last name"/>
<br />
<input type="image" value="Submit" src="submit-1.gif" id="submit"/>
</form>
</div>
#iphone {
position: absolute;
top: 50%;
left: 50%;
margin-top: -350px; /* Half the height */
margin-left: -266px; /* Half the width */
z-index: -100;
}
#form {
position: absolute;
z-index: 9999;
}
input {
position: relative;
text-align: center;
font-size: 30px;
width: 200px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 5px solid #cccccc;
padding: 15px;
background: rgba(255,255,255,0.5);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px; /* future proofing */
-khtml-border-radius: 2px; /* for old Konqueror browsers */
z-index: 9999;
}

On inspecting your site, the problem seems to be in margin-top
#form {
text-align: center;
margin-top: -500px; //remove this will fix your problem
color: #193485;
font-family: Arial;
}
Updates:
Not sure, since the height if the div is small compared to the margin-top:300px. It get hidden. Try this