CODEWITHSUNDEEP
csswidthmedia
frontMan86
frontMan86

Reputation: 33

Css mobile version (trouble with width)

I need to do mobile version of this page.(code below) But I receive the result such as on screenshot see my mobile version What i have do? P.S. if not difficult couple of words about the html structure and css (I just started to learn how to make websites) 

.row-wrap-left,
.row-wrap-right,
.row-wrap-bottom,
.field-wrap {
	float: none;
	width: 100%;
}

.request-input {
	width: 90%;
}

textarea {
	width: 98%;
}

.button-submit {
	float: none;
	width: 100%;
	margin-bottom: 20px;
}

.button-cancel {
	float: none;
	width: 100%;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
 
.clearfix:after {
  clear: both;
}

body {
	background: #282828;
	font-family: 'Montserrat', sans-serif;
}

.container {
	background: #27292b;
	max-width: 636px;
}

.request {
	text-align: left;
	position: relative;
	overflow: hidden;
}


.wrapper {
	padding: 36px 85px 60px 85px;
}

.row-wrap-left {
	float: left;
	width: 50%;
	overflow: hidden;
}

.row-wrap-right {
	float: right;
	width: 50%;
	overflow: hidden;
}

.row-wrap-right .field-wrap {
	float: right;
}

.row-wrap-bottom {
	float: left;
	width: 100%;
	overflow: hidden;
}

.field-wrap {
	position: relative;
}

form {
	overflow: hidden;
}

.request-head h1 {
	font-size: 29px;
	text-transform: uppercase;
	color: #fff;
	padding-bottom: 25px;
	border-bottom: solid 1px #47494b;
	margin-bottom: 36px;
}

.request-input {
	width: 195px;
	height: 12px;
	font-size: 18px;
	padding: 14px;
	background: none;
	border: 1px solid #47494b;
	border-radius: 2px;
	margin-top: 17px;
	margin-bottom: 44px; 
}

.request-country,
.request-code {
	width: 33px;
}

.request-number {
	width: 58px;
}

.request-input:focus,
textarea:focus {
	outline: none;
	color: #fff;
	border-color: #fff;
}

.request-input:focus ~ label,
.request-input:focus + span,
textarea:focus + label {
	color: #fff;
}

.field-wrap label {
	color: #434546;
	font-size: 13px;
	display: block;
	position: absolute;
	top: 0;
}

.field-wrap .icon {
	position: absolute;
	top: 30px;
	margin-left: -40px;
	padding-left: 10px;
	color: #434546;
}

textarea {
	width: 460px;
	height: 150px;
	font-size: 18px;
	background: none;
	border: 1px solid #47494b;
	border-radius: 2px;
	margin-top: 17px;
	margin-bottom: 28px;
}

p {
	font-size: 13px;
	color: #434546;
}

a {
	font-size: 13px;
	text-decoration: none;
	color: #fff;
}

.agreement {
	margin-bottom: 30px;
}

.button-submit {
	background: #5d9f81;
    color: #fff;
    border: none;
    padding: 14px 44px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    border-radius: 2px;
    margin-right: 18px;
}

.button-cancel {
    background: none;
    color: #434546;
    border: 1px solid #47494b;
    padding: 14px 44px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    border-radius: 2px;
}

.button-submit:hover {
	background: #4c876c;
    color: #fff;
    cursor: pointer;
}

.button-cancel:hover {
    background: #5d9f81;
    color: #fff;
    cursor: pointer;
}

input:focus:invalid,
textarea:focus:invalid {
	border: 1px solid #e7635e;
}

input:focus:invalid ~ label {
	color: #da5f5b;
}

input:focus:invalid + span {
	color: #da5f5b;
}

textarea:focus:invalid + label {
	color: #da5f5b;
}

input:required:valid, 
textarea:required:valid {
	border: 1px solid #6abd97;
	color: #6abd97;
}

input:required:valid + label, 
textarea:required:valid + label{
	color: #6abd97;
}

input:required:valid ~ label {
	color: #6abd97;
}

input:required:valid + span {
	color: #6abd97;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Register form</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/small.css" media="(max-width:600px)">
</head>
<body>
	<div class="container clearfix">
		<div class="wrapper clearfix">
			<div class="request clearfix">
				<div class="request-head">
					<h1>Request a demo</h1>
				</div>
				<form action="/" method="post">
					<div class="row-wrap-left">
						<div class="field-wrap">
							<input type="text" name="form_data[first_name]" id="fname" class="request-input request-fname" required autocomplete="off">
							<label for="fname">First Name</label>
						</div>
						<div class="field-wrap">
							<input type="email" name="form_data[email]" id="email" class="request-input request-email" required autocomplete="off">
							<label for="email">Email&nbsp;*</label>
						</div>
						<div class="field-wrap">
							<input type="text" name="form_data[school_organization]" id="school-org" class="request-input request-school" required autocomplete="off">
							<span class="icon"><i class="fa fa-search"></i></span>
							<label for="school-org">School/Organization&nbsp;*</label>
						</div>
					</div>
					<div class="row-wrap-right">
						<div class="field-wrap">
							<input type="text" name="form_data[last_name]" id="lname" class="request-input request-lname" required autocomplete="off">
							<label for="lname">Last Name</label>
						</div>
						<div class="field-wrap">
							<input type="tel"  name="form_data[phone][country]" id="tel" class="request-input request-country" required autocomplete="off" pattern="[0-9]{3}">
							<input type="tel"  name="form_data[phone][code]" id="tel" class="request-input request-code" required autocomplete="off" pattern="[0-9]{2}">
							<input type="tel"  name="form_data[phone][number]" id="tel" class="request-input request-number" required autocomplete="off" pattern="[0-9]{7}">
							<label for="tel">Phone Number</label>
						</div>
						<div class="field-wrap">
							<input type="text" name="form_data[role]" id="role" class="request-input request-role" required autocomplete="off">
							<label for="role">Role on Campus&nbsp;*</label>
						</div>
					</div>
					<div class="row-wrap-bottom">
						<div class="field-wrap">
							<textarea name="form_data[goals]" id="goals" class="label-goals" required autocomplete="off"></textarea>
							<label for="goals">What are your goals for DemoSystem?&nbsp;*</label>
						</div>
						<p class="agreement">
							<input type="checkbox" name="checkbox" id="checkbox" checked>
							<label for="checkbox">
								I agree to the DemoSystem 
								<span>
									<a href="#">Terms of Service</a>
								</span> 
								and 
								<span>
									<a href="#">Privacy Policy</a>
								</span>
							</label>
						</p>
						<div class="field-wrap">
							<button class="button-submit">Submit</button>
							<button class="button-cancel">Cancel</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
</html>

Upvotes: 0

Views: 194

Answers (2)

Hugz
Hugz

Reputation: 123

You can use media query in your css.

Media query allowed you to change css depending on the screen size.

@media screen and (max-width: 750px) {
    /* your new Css here */
}

Right after the max-width parametre you put the desired width.

If the max-width parameter is set to 750px the code will be active whenever the screen size is bellow 750px.

Then you can put all the existing css selector already used for higher screen and make them have new value.

Put the media query code at the bottom of you css style sheet.

You can use several media query in the same code.

Example:

@media screen and (max-width: 1150px) {
    /* your new Css for tablet here */
}
@media screen and (max-width: 750px) {
    /* your new Css for smart phone here */
}

Also it's strongly advise to add the code below on the head of your html code 

<meta name="viewport" content="width=device-width, initial-scale=1">

Feel free to ask if needed.

Upvotes: 1

silviagreen
silviagreen

Reputation: 1729

In the small css you have to specify a new width for input #id:

#tel{
  width:25%;
}

Result: jsfiddle

Upvotes: 0

Related Questions