Hi Everyone

NOW I will represent how to make Responsive Contact Form

***  *** ***  *** ***  *** *** Code HTML *** ``` Document ``` *** *** Code CSS *** ``` *{ box-sizing: border-box; }

body{
background:#92bde7;
color:#485e74;
line-height:1.6;
font-family: Arial, Helvetica, sans-serif;
padding:1em;
}

.container{
max-width:1170px;
margin-left:auto;
margin-right:auto;
padding:1em;
}

ul{
list-style: none;
padding:0;
}

.brand{
text-align: center;
}

.brand span{
color:#fff;
}

.wrapper{
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}

.wrapper > *{
padding: 1em;
}

.company-info{
background:#c9e6ff;
}

.company-info h3, .company-info ul{
text-align: center;
margin:0 0 1rem 0;
}

.contact{
background:#f9feff;
}

.contact form{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap:20px;
}

.contact form label{
display:block;
}

.contact form p{
margin:0;
}

.contact form .full{
grid-column: 1 / 3;
}

.contact form button, .contact form input,
.contact form textarea{
width:100%;
padding:1em;
border:1px solid #c9e6ff;
}

.contact form button{
background:#c9e6ff;
border:0;
text-transform: uppercase;
}

.contact form button:hover,.contact form button:focus{
background:#92bde7;
color:#fff;
outline:0;
transition: background-color 2s ease-out;
}

@media(min-width:700px){
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
}

.wrapper > *{
padding:2em;
}

.company-info h3, .company-info ul, .brand{
text-align: left;
}
}

***
<img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmYWJFK3dXNb1sWiwX8UUFai7NA4oMq5JG3MH5PmWxLrCF/DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg" alt="DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg">

<center><h3>🎄Thanks and have a nice day🎄</h3></center>

<img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmYWJFK3dXNb1sWiwX8UUFai7NA4oMq5JG3MH5PmWxLrCF/DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg" alt="DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg">