I’ve tweaked your code by getting rid of flex on the .form-rows (obviously you only need to do this on screensizes > 700px as your media query shows).
I’ve then taken off the width of the label as it was having no effect when you were using flex anyway, and then floated both the label and the input.
To get a new line to start, you can use clear:left, on the label, which essentially means start a new row and ignore everything before that’s floated.
Complete code:
@media only screen and (min-width: 700px) {
.speaker-form,
.speaker-form-header {
width: 600px;
}
.form-row {
/* flex-direction: row;
align-items: flex-start; /* To avoid stretching */
margin-bottom: 20px;
}
.form-row input[type='text'],
.form-row input[type='email'] {
background-color: #FFFFFF;
width: 250px;
height: initial;
float:left;
}
.form-row label {
text-align: right;
width: auto;
margin-top: 7px;
padding-right: 20px;
clear:left;
float:left
}
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Speaker Submission</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<header class='speaker-form-header'>
<h1>Speaker Submission</h1>
<p><em>Want to speak at our fake conference? Fill out
this form.</em></p>
</header>
<form action='' method='get' class='speaker-form'> <!-- The action attribute contains a URL. All the information is sent to that URL. Meanwhile, the method attribute lets you later analyze the info.-->
<div class='form-row'>
<label for='full-name'>Name</label> <!--The label element lets us collect user input. The for and id attribute must always match-->
<input id='full-name' name='full-name' type='text'/> <!--The input element creates a text field, and it can change according to the type of arguments stated later. When the information is returned to the server, it returns with the name stated in the name attribute plus the value entered-->
<label for='email'>Email</label>
<input id='email' name='email' type='email' placeholder='[email protected]'/>
</div>
</form>
</body>
</html>
Working fiddle : https://jsfiddle.net/9rah0516/ (the snippet won’t show properly as you’re limited by screen width – or try running clicking Full Page after running snippet where it will work)
sometimes the solution is to change a bit your html. In this case it is easier to add a division for each label and input. That way, you can easily change the display method to be inline(-block) or block to put one div under another one.
You will only need to change form .form-row .section-form css for your mobile/desktop version, as a shorter css code is always better (reducing loading time of external resources).
Selecting input with their type is useful when you need to do specific things for one of them, here as you don’t do that, you can remove the type selection and only keep form .form-row .section-form input. It’s easier, clearer and faster.
You can also achieve what you want to do by changing .form-row into display: grid (grid system), defining how many rows and columns you want and finally changing the order of each .section-form to place them the way you want, but it’s a bit more difficult and I think you don’t need it for a form with 2 inputs and labels.
form .form-row .section-form {
display: block;
margin: 10px 5px;
}
form .form-row .section-form > * {
display: inline-block;
}
/********** INLINE version ************/
/*
form .form-row .section-form {
display: inline-block;
}
*/
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Speaker Submission</title>
<!-- <link rel='stylesheet' href='styles.css'/> -->
</head>
<body>
<header class='speaker-form-header'>
<h1>Speaker Submission</h1>
<p><em>Want to speak at our fake conference? Fill out
this form.</em></p>
</header>
<form action='' method='get' class='speaker-form'> <!-- The action attribute contains a URL. All the information is sent to that URL. Meanwhile, the method attribute lets you later analyze the info.-->
<div class='form-row'>
<div class="section-name section-form">
<label for='full-name'>Name</label> <!--The label element lets us collect user input. The for and id attribute must always match-->
<input id='full-name' name='full-name' type='text'/>
</div><!--The input element creates a text field, and it can change according to the type of arguments stated later. When the information is returned to the server, it returns with the name stated in the name attribute plus the value entered-->
<div class="section-email section-form">
<label for='email'>Email</label>
<input id='email' name='email' type='email' placeholder='[email protected]'/>
</div>
</div>
</form>
</body>
</html>
Here is my HTML and the CSS part where it got bugged. I simply wanted to create a desktop layout as I already started with the mobile layout. So I started placing labels and inputs but I already had some arrangement problems and fixed some with flexbox. I’ve tried to change the display, the overflow, use floats, wrap up the text but none has worked
@media only screen and (min-width: 700px) {
.speaker-form,
.speaker-form-header {
width: 600px;
}
.form-row {
flex-direction: row;
align-items: flex-start; /* To avoid stretching */
margin-bottom: 20px;
}
.form-row input[type='text'],
.form-row input[type='email'] {
background-color: #FFFFFF;
width: 250px;
height: initial;
}
.form-row label {
text-align: right;
width: 120px;
margin-top: 7px;
padding-right: 20px;
}
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Speaker Submission</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<header class='speaker-form-header'>
<h1>Speaker Submission</h1>
<p><em>Want to speak at our fake conference? Fill out
this form.</em></p>
</header>
<form action='' method='get' class='speaker-form'> <!-- The action attribute contains a URL. All the information is sent to that URL. Meanwhile, the method attribute lets you later analyze the info.-->
<div class='form-row'>
<label for='full-name'>Name</label> <!--The label element lets us collect user input. The for and id attribute must always match-->
<input id='full-name' name='full-name' type='text'/> <!--The input element creates a text field, and it can change according to the type of arguments stated later. When the information is returned to the server, it returns with the name stated in the name attribute plus the value entered-->
<label for='email'>Email</label>
<input id='email' name='email' type='email' placeholder='[email protected]'/>
</div>
</form>
</body>
</html>
Thanks man. I ran the code and it helped me solve my issue
Thanks man, it really helped me. I already grey some grey hairs
Thanks man, but I have one question. In the CSS part what does > * apply to? I’m sorry, I’m new and I know that in the beginning of a stylesheet, I apply css to * for all the page but I don’t understand what does that line do
