Download the image below, and then upload it to your lesson screen. Once uploaded, the image will always be available in your lesson. You only have to upload media once per lesson!
Each square represents 20px. Each larger square represents 100px.
<aside> 💡 Hover over the image and click the download button.
</aside>
Once the image has been added to the screen, it will need to be positioned as close to the top-left corner as possible. It may help to zoom your browser for greater control. When you are done, it should look roughly like this:
The alignment grid image should render at 0px for the top-left corner of the screen. It is okay to be a little off. The image above is positioned at 1px from both top and left of the screen, for example. As a general rule, just try to be within 5px of the intended position.
<aside> 💡 If positioning a component on the screen causes it to snap to points beyond the desired location, try adjusting the size of the component. Using just the top, right, bottom, or left green borders may allow for greater control.
</aside>
Once the image has been positioned to the top-right corner of the screen, it will need to be resized as close to the bottom-right corner as possible. Be sure to click and drag the bottom-right corner of the image to stretch it to the bottom-right corner of the screen. Again, it may help to zoom your browser for greater control. when you are done, it should look roughly like this:
The alignment grid image should render at 1000 x 540px. It is okay to be a little off. The image above is sized at 1000 x 539px, for example. As a general rule, try to be within 5px of the intended size.
Once the alignment grid image has been positioned and sized, it should look like this when previewing the lesson screen.
<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/4d8c94c4-dbaf-444c-a101-bc6849e02bd2/ba808d05-1d27-471f-bcdd-52cb6a802cec/transparent-pixel.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/4d8c94c4-dbaf-444c-a101-bc6849e02bd2/ba808d05-1d27-471f-bcdd-52cb6a802cec/transparent-pixel.png" width="40px" />
</aside>
<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/4d8c94c4-dbaf-444c-a101-bc6849e02bd2/ba808d05-1d27-471f-bcdd-52cb6a802cec/transparent-pixel.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/4d8c94c4-dbaf-444c-a101-bc6849e02bd2/ba808d05-1d27-471f-bcdd-52cb6a802cec/transparent-pixel.png" width="40px" />
Alignment grid as seen in Preview mode.
</aside>
The hard work is done! From here on out, you can simply copy the image and paste it into any screen throughout the lesson. For best results place the alignment grid image before adding lesson content. If content is already on the screen, you can send the alignment grid to the back by clicking the minus button. Click however many times needed to put it behind the lesson content.
