Alignment issue (html)

[mwhite3]

So I haven't been able to figure this out and so I am humbly seeking the wisdom of the masses. I have page where I would like to have some separation between tasks. However, I am unable to get the text to align directly underneath the headings. Unfortunately, I know enough about html and Canvas striped down version to be foolish and not successful. 

The coding looks something like this.

"<h3 style="background-color: #7a3b04; color: #ffffff; padding: 5px; margin-bottom: 5px; width: 50%; border-radius: 10px; text-align: left;"><span style="color: #ffffff; font-family: 'Lato Extended', 'Helvetica Neue', Helvetica, Arial, sans-serif;"><strong>Part Two Task 1&nbsp;</strong></span></h3>
<div style="font-size: large; line-height: 150%; margin: 0px 30px; text-align: left;"><span class="TextRun SCXW176064676 BCX2" style="font-size: 14pt; line-height: 20.85px; font-family: 'Lato Extended', 'Helvetica Neue', Helvetica, Arial, sans-serif;" lang="EN-US" data-contrast="auto"><span class="NormalTextRun SCXW176064676 BCX2"><strong><em>Use this page as a guide for your students during the synchronous session. Students should be at this page when you join and then you can embed links to tasks/websites, etcs.&nbsp;</em></strong></span></span></div>"

Last request - is there a way to have a bit more space between the line of text and the heading above it.

Thanks in advance.

[Gabriel33 · Accepted solution]

The issue is in the "margin: 0px 30px" in the div. If you either remove that or change the 30 to 0, it should better align:

<h3 style="background-color: #7a3b04; color: #ffffff; padding: 5px; margin-bottom: 5px; width: 50%; border-radius: 10px; text-align: left;"><span style="color: #ffffff; font-family: 'Lato Extended', 'Helvetica Neue', Helvetica, Arial, sans-serif;"><strong>Part Two Task 1&nbsp;</strong></span></h3>
<div style="font-size: large; line-height: 150%; margin: 0px 0px; text-align: left;"><span class="TextRun SCXW176064676 BCX2" style="font-size: 14pt; line-height: 20.85px; font-family: 'Lato Extended', 'Helvetica Neue', Helvetica, Arial, sans-serif;" lang="EN-US" data-contrast="auto"><span class="NormalTextRun SCXW176064676 BCX2"><strong><em>Use this page as a guide for your students during the synchronous session. Students should be at this page when you join and then you can embed links to tasks/websites, etcs.&nbsp;</em></strong></span></span></div>

becomes:

Part Two Task 1 

Use this page as a guide for your students during the synchronous session. Students should be at this page when you join and then you can embed links to tasks/websites, etcs. 

[Gabriel33 · Accepted solution]

The issue is in the "margin: 0px 30px" in the div. If you either remove that or change the 30 to 0, it should better align:

<h3 style="background-color: #7a3b04; color: #ffffff; padding: 5px; margin-bottom: 5px; width: 50%; border-radius: 10px; text-align: left;"><span style="color: #ffffff; font-family: 'Lato Extended', 'Helvetica Neue', Helvetica, Arial, sans-serif;"><strong>Part Two Task 1&nbsp;</strong></span></h3>
<div style="font-size: large; line-height: 150%; margin: 0px 0px; text-align: left;"><span class="TextRun SCXW176064676 BCX2" style="font-size: 14pt; line-height: 20.85px; font-family: 'Lato Extended', 'Helvetica Neue', Helvetica, Arial, sans-serif;" lang="EN-US" data-contrast="auto"><span class="NormalTextRun SCXW176064676 BCX2"><strong><em>Use this page as a guide for your students during the synchronous session. Students should be at this page when you join and then you can embed links to tasks/websites, etcs.&nbsp;</em></strong></span></span></div>

becomes:

Part Two Task 1 

Use this page as a guide for your students during the synchronous session. Students should be at this page when you join and then you can embed links to tasks/websites, etcs. 

[mwhite3]

Wow - thank you. That was driving me mad. Can you help with the second question - of how to increase spacing around the heading so the text is not directly below it.

Thanks again.

[Gabriel33 · Accepted solution]

Sorry, I missed that. You can change the "margin-bottom" from 5px to something else. Here's 50 as an example:

Part Two Task 1 

Use this page as a guide for your students during the synchronous session. Students should be at this page when you join and then you can embed links to tasks/websites, etcs. 

[mwhite3]

You are brilliant. Thank you so much.

[dbrace]

Something to consider @mwhite3, as well as others that come across this.

While I understand that the Canvas LMS does not use every aspect of HTML that could be possible and that can be frustrating, one thing to experiment with in the future is the "Try it Yourself" feature at w3schools.com. This webpage can be very helpful when learning new code. Just make sure to have patience since some HTML could be interpreted differently by the Canvas LMS and refer to  Canvas HTML Editor Allowlist - Instructure Community - 387066  for what is not supported at all.

Using the code that you originally provided, you can see that the formatting problem is not isolated to only the Canvas LMS.

Using the code that @Gabriel33 recommended, you can see that it worked there are well.

For this situation, you still would have needed to know what code should have been added/edited but it is an alternative location to try to diagnose and troubleshoot code.

-Doug