Split the new request page

Hi mfg
 

1) You can replace the existing code with your current one and also replace the placeholder image.
 

<div class="container-divider"></div>
<div class=" container">
   <nav class="sub-nav">
  {{breadcrumbs}}
  <div class="search-container">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon">
      <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
      <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
    </svg>
    {{search submit=false}}
  </div>
</nav>
 <div class="request-wrapper">
   	<div class="request-image">
      <img src="https://images.unsplash.com/photo-1544725121-be3bf52e2dc8?q=80&w=2067&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
   	</div>
   
 	<div class="request-form">
		<h1>
  		{{t 'submit_a_request'}}
  		<span class="follow-up-hint">
    		{{follow_up}}
  		</span>
		</h1>
		<div id="main-content" class="form">
  		{{request_form wysiwyg=true}}
		</div>
	</div>
 </div>
</div>

2) Add the below CSS at the bottom of your style.css file 

.request-wrapper {
   display: flex;
   justify-content: space-between;
   flex-direction: column;
 }
 
 .request-image img {
   width:100%;
 }
 
@media(min-width:1024px) {
 	.request-wrapper { 
  	flex-direction: row;
 	}
 
 	.request-form {
    	flex: 1 0 50%;
 	}
 
   .request-image {
   	flex: 0 0 50%;
   	margin-right:32px;
 	}
}

Let me know if it solves your issue.

Thank You 

Pulkit

Team Diziana