Recent searches


No recent searches

Split the new request page



Posted Sep 06, 2024

I have a stakeholder that would like to add an image to go alongside the request form. Is it possible to put the form in a container on one side, and the image on the other? 

We're using the stock template:

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

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


0

1

1 comment

image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

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

 

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post