Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users

Dashboard
Notifications
Mark all as read
Q&A

Modern CSS for splitting form sections into columns

+5
−0

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?

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

0 comments

1 answer

+7
−0

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%;
}
Why does this post require moderator attention?
You might want to add some details to your flag.

1 comment

Thanks, that seems to me what I needed. JohnDoea‭ 14 days ago

Sign up to answer this question »