Cesar Ho Cesar Ho - 6 months ago 9
HTML Question

div table row 2 cannot align when dynamic error message shown

Having a div table using Contact Form 7, the alignment is correctly. However, when there is a warning message shown, row 2 does not shift down all together (refer to the screen shot). How to solve this?

style.css:

#responsive-form{
max-width:1140px /*-- change this to get your desired form width --*/;
margin:0;
width:100%;
}
.form-row{
width: 100%;
}

.column-3, .column-4{
font-family: 'Lato', sans-serif;
width: 252px;
background: #fff;
float: left;
padding: 20px 10px 40px;
margin: 0 43px 32px 0;
box-shadow: rgba(0, 0, 0, .20) 0 0 5px;
overflow: hidden;
}
}

.column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}


html segment:


<div class="form-row">
<div class="column-4">
<p>Name [text name1 size:35]</p>
<p>Email[email email1 size:35]</p>
<p>Mobile[text mobile1 size:35]</p>
</div>
<div class="column-4">
<p>Name [text name2 size:35]</p>
<p>Email[email email2 size:35]</p>
<p>Mobile[text mobile2 size:35]</p>
</div>
<div class="column-4">
<p>Name [text name3 size:35]</p>
<p>Email[email email3 size:35]</p>
<p>Mobile[text mobile3 size:35]</p>
</div>
<div class="column-4">
<p>Name [text name4 size:35]</p>
<p>Email[email email4 size:35]</p>
<p>Mobile[text mobile4 size:35]</p>
</div>
</div>
<div class="form-row">
<div class="column-4">
<p>Name [text name5 size:35]</p>
<p>Email[email email5 size:35]</p>
<p>Mobile[text mobile5 size:35]</p>
</div>
<div class="column-4">
<p>Name [text name6 size:35]</p>
<p>Email[email email6 size:35]</p>
<p>Mobile[text mobile6 size:35]</p>
</div>
<div class="column-4">
<p>Name [text name7 size:35]</p>
<p>Email[email email7 size:35]</p>
<p>Mobile[text mobile7 size:35]</p>
</div>
<div class="column-4">
<p>Name [text name8 size:35]</p>
<p>Email[email email8 size:35]</p>
<p>Mobile[text mobile8 size:35]</p>
</div>
</div>


Screen Show

Answer

Try

display: flex

.form-row {
  display: flex;
  flex-direction: row;
}
.column-4 {
  width: 20%;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  padding: .5em;
  margin: .5em;
}
<div class="form-row">
  <div class="column-4">
    <p>Name [text name1 size:35]</p>
    <p>Email[email email1 size:35]</p>
    <p>Mobile[text mobile1 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name2 size:35]</p>
    <p style='color:red'>Error Message</p>
    <p>Email[email email2 size:35]</p>
    <p>Mobile[text mobile2 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name3 size:35]</p>
    <p>Email[email email3 size:35]</p>
    <p>Mobile[text mobile3 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name4 size:35]</p>
    <p>Email[email email4 size:35]</p>
    <p>Mobile[text mobile4 size:35]</p>
  </div>
</div>
<div class="form-row">
  <div class="column-4">
    <p>Name [text name5 size:35]</p>
    <p>Email[email email5 size:35]</p>
    <p>Mobile[text mobile5 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name6 size:35]</p>
    <p>Email[email email6 size:35]</p>
    <p>Mobile[text mobile6 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name7 size:35]</p>
    <p>Email[email email7 size:35]</p>
    <p>Mobile[text mobile7 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name8 size:35]</p>
    <p>Email[email email8 size:35]</p>
    <p>Mobile[text mobile8 size:35]</p>
  </div>
</div>

Comments