View source for Sandbox

This is the form class for you:

<div class="moha-embed-form">
{{#widget:Iframe
|url=https://docs.google.com/forms/d/e/1FAIpQLScBg4M4__j5Yv3cUojXvZFQWacSWBPxWT-yRO3m5GIiZYh0Tw/viewform?embedded=true
|width=100%
|height=2800
}}
</div>



'''Instructions for start page intro box w/ image''' <br>
A good option for this is to use the CSS Grid.
https://css-tricks.com/snippets/css/complete-guide-grid/

I've marked the necessary HTML and CSS with comments in the Codepen for reference.
https://codepen.io/Nick-Sergent/pen/mdQKbaZ

The gist:
The client will need to add the image within the "moha-start-section" div of the Artist Start page. Keep in mind that this needs to be after the "moha-start-section-content" div. This will place the text content and image next to one another in the "moha-start-section" div. We then use CSS to set those elements in a grid structure and define column widths that make it responsive for different screens.

That is this line:
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

If the client would like to adjust the breakpoint at which the text content and image break onto two lines they can change the pixel value in that line.

If the client needs a more detailed explanation of what's going on, this article explains the responsive CSS.
https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/

'''The following CSS was added to the stylesheet for this element'''
<pre>
/* start page intro image setup */
.moha-start-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.moha-start-section > p {
	margin-bottom: 0;
}

.moha-start-section .image img {
  object-fit: cover;
  max-width: 100%;
  max-height: 430px;
  padding: 0;
  margin: 0;
  float: right;
}
</pre>

This is your start page intro code: 

<div class="moha-start-section">
<div class="moha-start-section-content">
Below you'll find guides and information for artists interested in getting involved at MoHA. 

As first steps we recommend 
*Joining the [[Newsletter_MoHA|MoHA newsletter]]
*Signing up for [[Open_Calls|open call list]] 
*Saying hello on [[Discord]]
<br>
<div class="moha-start-section-quicklinks">
For a list of programs and opportunities for specific fields you can skip to
*'''[[Artist_Start#Digital_Artist|Digital Artist]]''' 
*'''[[Artist_Start#Visual_Artist|Visual Artist]]''' 
*'''[[Artist_Start#Performing_Artist|Performing Artist]]''' 
</div>
</div>
[[File:Moha-img-test crop.jpg]]
</div>

Here is the quicklink class:
<code>div class="moha-start-section-quicklinks"</code>

This is the button code:
<br>
<span class="moha-button">[[Fantastic Arcade Committee Application|Internal Link]]</span>
<span class="moha-button">[https://google.com External Link]</span>

CSS Page
https://moha.wiki/MediaWiki:Common.css

Java Script Page
https://moha.wiki/MediaWiki:Common.js

External Redirect

<nowiki>{{#externalredirect: WEBSITE GOES HERE}}
</nowiki>

To edit an external redirected page, use <nowiki>https://moha.wiki/w/index.php?title=PAGE NAME GOES HERE&action=edit</nowiki>

Testing a different way to share jotforms. 

<script type="text/javascript" src="https://form.jotform.com/jsform/231806252064147"></script>