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

81%

+7 −0

Q&A Modern CSS for splitting form sections into columns

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"><...

posted 3y ago by Culyx‭ · edited 3y ago by Culyx‭

Answer

#2: Post edited by

Culyx‭ · 2021-06-07T15:23:21Z (over 3 years ago)
had an extra % symbol in the CSS, removing that in case people do copy-paste

Copy Link

Raw

Markdown

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%%;~~
}
```

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%;
}
```

#1: Initial revision by

Culyx‭ · 2021-06-04T15:53:22Z (over 3 years ago)

Copy Link

Raw

Markdown

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%%;
}
```

Communities

Post History