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.

Post History

77%

+5 −0

Q&A 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> ...

1 answer · posted 3y ago by deleted user · edited 3y ago by Alexei‭

Question css css-multicolumn-layout mobile

#4: Post edited by

Alexei‭ · 2021-06-08T06:47:02Z (almost 3 years ago)
added relevant tags

Copy Link

Raw

Markdown

css

css css-multicolumn-layout mobile

#3: Post edited by (deleted user) · 2021-06-04T15:21:06Z (almost 3 years ago)

Copy Link

Raw

Markdown

I have a mobile-only HTML contact form divided in source code into three sections; each section should contain fields by a different context.
```html
<!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>~~
~~~~
~~<section>~~
~~~~
~~<section>~~
~~~~
~~</section>~~
~~</section>~~
~~</section>~~
~~<div><input type="submit" value="Submit" id="submit" class="submit"></input></div>~~
~~</div>~~
~~</form>~~
~~</div>~~
~~</body>~~
</html>
```
In mobile it would appear just as a single columned long form but I think to change the form from mobile-only to mobile-first so that 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 would get something like:
```
|----------| |----------| |----------|
| Column 1 | | Column 2 | | Column 3 |
|----------| |----------| |----------|
|------------------------------------|
| Submit |
|------------------------------------|
```
~~How would you suggest to achieve that goal with modern CSS?~~

I have a mobile-only HTML contact form divided in source code into three sections; each section should contain fields by a different context.
```html
<!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>
<section>
<section>
</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;<br>
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?

#2: Post edited by (deleted user) · 2021-06-04T15:16:15Z (almost 3 years ago)

Copy Link

Raw

Markdown

~~I have a mobile-only HTML contact divided in source code into three sections; each section should contain fields by a different context.~~
```html
<!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>
<section>
<section>
</section>
</section>
</section>
<div><input type="submit" value="Submit" id="submit" class="submit"></input></div>
</div>
</form>
</div>
</body>
</html>
```
In mobile it would appear just as a single columned long form but I think to change the form from mobile-only to mobile-first so that 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 would get something like:
```
|----------| |----------| |----------|
| Column 1 | | Column 2 | | Column 3 |
|----------| |----------| |----------|
|------------------------------------|
| Submit |
|------------------------------------|
```
How would you suggest to achieve that goal with modern CSS?

I have a mobile-only HTML contact form divided in source code into three sections; each section should contain fields by a different context.
```html
<!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>
<section>
<section>
</section>
</section>
</section>
<div><input type="submit" value="Submit" id="submit" class="submit"></input></div>
</div>
</form>
</div>
</body>
</html>
```
In mobile it would appear just as a single columned long form but I think to change the form from mobile-only to mobile-first so that 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 would get something like:
```
|----------| |----------| |----------|
| Column 1 | | Column 2 | | Column 3 |
|----------| |----------| |----------|
|------------------------------------|
| Submit |
|------------------------------------|
```
How would you suggest to achieve that goal with modern CSS?

#1: Initial revision by (deleted user) · 2021-06-04T13:39:58Z (almost 3 years ago)

Copy Link

Raw

Markdown

Modern CSS for splitting form sections into columns

I have a mobile-only HTML contact divided in source code into three sections; each section should contain fields by a different context.

```html
<!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 it would appear just as a single columned long form but I think to change the form from mobile-only to mobile-first so that 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 would get something like:

```
|----------| |----------| |----------|
| Column 1 | | Column 2 | | Column 3 |
|----------| |----------| |----------|
|------------------------------------|
|               Submit               |
|------------------------------------|
```

How would you suggest to achieve that goal with modern CSS?

css

Communities

Post History