Further content to added to the discord page and making content full width on portrait tablet

Author: KeiranWDigital

_layouts/default.html

@@ -22,7 +22,7 @@ <h1 class="cover-heading">CODEWITH<span id="small-screen-break"><br /></span><sp
                 </div>
             </div>
             <div class="row unpadded">
-                <div class="col-lg-10">
+                <div class="col-l-12 col-xl-10">
                     {{content}}
                 </div>
             </div>

discord.html

@@ -18,6 +18,7 @@ <h2>Index</h2>
 <ul>
     <li><a href="#beforetheevent">Before the event</a></li>
     <li><a href="#instructions">Instructions</a></li>
+    <li><a href="#controls">Controls</a></li>
     <li><a href="#troubleshooting">Troubleshooting</a></li>
 </ul>
 
@@ -67,24 +68,24 @@ <h2>Instructions</h2>
 <p>When you follow the invite link, you should see the following message.</p>
 
 
-<img class="discord-image mg-fluid" src="../images/discord-signup.png">
+<img class="discord-image mg-fluid" width="200" src="../images/discord-signup.png">
 
 <p>
     You can either use the Discord app or, if you don’t have Discord
     installed, we recommend you join on the web. Click the button shown:
 </p>
 
-<img class="discord-image mg-fluid" src="../images/discord-web.png">
+<img class="discord-image mg-fluid" width="200" src="../images/discord-web.png">
 
 <p>
     You can then sign up or log into an existing account.
 </p>
 <div class="row">
     <div class="discord-cols col-m-12 col-l-6">
-        <h3>Register</h3><img class="discord-image mg-fluid" src="../images/discord-create.png">
+        <h3>Register</h3><img width="200" class="discord-image mg-fluid" src="../images/discord-create.png">
     </div>
     <div class="discord-cols col-m-12 col-l-6">
-        <h3>Log in</h3><img class="discord-image mg-fluid" src="../images/discord-login.png">
+        <h3>Log in</h3><img width="200" class="discord-image mg-fluid" src="../images/discord-login.png">
     </div>
 </div>
 
@@ -117,34 +118,23 @@ <h3>Log in</h3><img class="discord-image mg-fluid" src="../images/discord-login.
 <p>
     Your name should appear underneath the channel name. Clicking the name a second time will show the other people in
     the channel. it will look something like this:</p>
-    <img class="discord-image mg-fluid" src="../images/discord-camera.png">
-    <!--TODO image of channel with cameras-->
+<img class="discord-image mg-fluid" src="../images/discord-camera.png">
+<!--TODO image of channel with cameras-->
 <p>
     Turn <b>off</b> your <b>microphone</b>. This is very important! You should
-    keep your microphone muted throughout the session. When you've done all that, click
+    keep your microphone muted throughout the session.
 </p>
 
-
 <!--TODO MUTE MICROPHONE BUTTON-->
-<img class="discord-image mg-fluid" src="./Content/audio-video-settings.png">
-
-
-
-
-
-<img class="discord-image mg-fluid" src="./Content/other-join-options.png">
-
+<img class="discord-image mg-fluid" src="../images/discord-buttons.png">
 
 <p>
-    Finally, make sure you still have your <b>webcam</b> and <b>microphone</b> muted. You can also
-    click on the <b>Meeting Chat</b> button to enable text chat. You can use this to ask questions
-    throughout the session. The presenter may answer during the lecture, or one of our instructor
-    team may respond in the Meeting Chat.
+    Finally, make sure you still have your <b>microphone</b> muted. You can also
+    click on the <b>Event Chat</b> channel to use text chat. You can use this to ask questions
+    throughout the session. The host may answer during the session, or one of the mentors
+    may respond in the Event Chat.
 </p>
 
-
-<img class="discord-image mg-fluid" src="./Content/cam-mic-chat.png">
-
 <div class="row unpadded">
     <div class="col">
         <p class="back-to-top">
@@ -156,10 +146,30 @@ <h3>Log in</h3><img class="discord-image mg-fluid" src="../images/discord-login.
 <a name="controls"></a>
 <h2>Controls</h2>
 <!--TODO IMAGES-->
-<h3>Microphone Mute</h3>
-<h3>Event Chat</h3>
-<h3>Video</h3>
+<div class="row">
+    <div class="discord-cols col-m-12 col-l-4">
+        <h3>Microphone Mute</h3><img class="discord-image mg-fluid" src="../images/discord-buttons.png">
+    </div>
+    <div class="discord-cols col-m-12 col-l-4">
+        <h3>Video On/Off</h3><img class="discord-image mg-fluid" width="300" src="../images/discord-video.png">
+    </div>
+    <div class="discord-cols col-m-12 col-l-4">
+        <h3>Event Chat</h3><img class="discord-image mg-fluid" width="300" src="../images/discord-event-chat.png">
+    </div>
+</div>
+
+
+
+
 <h3>Screen Share</h3>
+<div class="row">
+    <div class="discord-cols col-m-12 col-l-6">
+        <h4>Step 1</h4><img class="discord-image mg-fluid" src="../images/discord-screen-1.png">
+    </div>
+    <div class="discord-cols col-m-12 col-l-6">
+        <h4>Step 2</h4><img class="discord-image mg-fluid" width="300" src="../images/discord-screen-2.png">
+    </div>
+</div>
 
 <!--TODO Troubleshooting-->
 <a name="troubleshooting"></a>