Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
Modern CSS for splitting form sections into columns
I have a mobile-only HTML contact form divided in source code into three sections; each section should contain fields by a different context.
<!DOCTYPE html>
<html>
<head>
<title>contact_us</title>
<meta charset="utf-8">
<link rel="stylesheet" href="contact_form/frontend/contact_form.css"></link>
</head>
<body>
<div id="form_parent">
<form id="contact_form" class="contact_form" action="contact_form/backend/contact_form.php" method="POST">
<div id="form_child">
<section>
<!-- FORM FIELDS -->
<section>
<!-- FORM FIELDS -->
<section>
<!-- FORM FIELDS -->
</section>
</section>
</section>
<div><input type="submit" value="Submit" id="submit" class="submit"></input></div>
</div>
</form>
</div>
</body>
</html>
In mobile devices, the form should appear just as a single-columned long form but I think to change the form from mobile-only to mobile-first so that in devices with a viewport above say 992px the three sections would appear in three different columns and the submit button would appear with 100% width under all of them;
With the power of @media screen and (min-width: 992px) {/* Code */} I consider to get something like:
|----------| |----------| |----------|
| Column 1 | | Column 2 | | Column 3 |
|----------| |----------| |----------|
|------------------------------------|
| Submit |
|------------------------------------|
How would you suggest to do that with modern CSS?
1 answer
A simple way to deal with this is flex, wrap your 3 columns in a flex container:
<div class="container">
<div class="formField"></div>
<div class="formField"></div>
<div class="formField"></div>
</div>
Then set your CSS like so for your mobile:
.container{
display: flex;
flex-direction: column;
}
.formField{
width: 100%;
}
for your media query, you simply switch your CSS to something like this:
.container{
flex-direction: row;
}
.formField{
width: 32%;
}
0 comment threads