common/static/common/styles/studio/_custom.sass

@@ -692,6 +692,14 @@ button,
       .top-level-comment
         background-color: var(--color-bg-primary)
 
+  .training-group-item-content-detail
+    +margin(auto, x)
+    width: 100%
+
+    +media-xl
+      max-width: var(--container-width)
+      width: calc(100% - var(--training-group-item-nav-width))
+
     // TODO: revise training-group-item-nav display toggle on medium and small screens
   .training-group-item-nav
     +margin(3, bottom)
@@ -715,8 +723,6 @@ button,
 
 .training-header-img-helper
   align-items: center
-  display: flex
-  max-height: calc(var(--spacer) * 25)
   overflow: hidden
 
   img

training/templates/training/base_training.html

@@ -7,9 +7,6 @@
 {% endblock %}
 
 {% block content %}
-  {% block training_header_image %}
-  {% endblock training_header_image %}
-
   <div class="container-fluid pt-2 pt-md-3">
     <div class="d-md-none mb-3 pt-2 row">
       <div class="col-12">

training/templates/training/chapter.html

@@ -19,6 +19,7 @@
 {% endblock %}
 
 {% block nexted_content %}
+  <div class="training-group-item-content-detail">
    {% if chapter.thumbnail %}
       <div class="row mb-3">
         <div class="col">
@@ -31,8 +32,7 @@
         </div>
       </div>
     {% endif %}
-  <div class="mb-3 row ">
+
-    <div class="col">
     <div class="align-items-start row">
       <div class="col-12 col-md mb-3">
         <div class="d-md-block d-none">
@@ -65,10 +65,16 @@
     </div>
 
     {% if chapter.description %}
-        <section class="markdown-text mb-3">{% with_shortcodes chapter.description|markdown %}</section>
+      <section class="mb-3 row">
+        <div class="col col-lg-9">
+          <div class="markdown-text">
+            {% with_shortcodes chapter.description|markdown %}
+          </div>
+        </div>
+      </section>
     {% endif %}
 
-      <div class="row">
+    <div class="mb-3 row">
       <div class="col-12">
         <div class="cards card-layout-card-transparent files">
           {% for section in chapter.sections.all %}
@@ -80,7 +86,6 @@
       </div>
     </div>
   </div>
-  </div>
 {% endblock nexted_content %}
 
 {% block scripts %}

training/templates/training/training.html

@@ -11,23 +11,21 @@
   {% javascript 'training' %}
 {% endblock scripts %}
 
-{% block training_header_image %}
-  {% if training.picture_header_url %}
-  <div class="container">
-    <div class="mt-3 row">
-      <div class="col training-header-img-helper">
-        <img src="{{ training.picture_header_url }}" class="img-fluid img-width-100 rounded" alt="{{ training.name }}">
-      </div>
-    </div>
-  </div>
-  {% endif %}
-{% endblock training_header_image %}
-
 {% block nexted_content %}
-  <section>
+
+<section class="training-group-item training-group-item-content-detail">
   <div class="row">
     <div class="col">
-        <div class="row align-items-start mb-2">
+      <div class="mb-3 row">
+        <div class="col">
+          {% if training.picture_header_url %}
+            <div class="training-header-img-helper">
+              <img src="{{ training.picture_header_url }}" class="img-fluid img-width-100 rounded" alt="{{ training.name }}">
+            </div>
+          {% endif %}
+        </div>
+      </div>
+      <div class="align-items-start mb-3 row">
         <div class="col-12 col-md">
             <h1 class="mb-0">{{ training.name }}</h1>
           </div>
@@ -75,7 +73,13 @@
           </div>
         {% endif %}
 
-        <section class="markdown-text mb-3">{% with_shortcodes training.summary_rendered %}</section>
+        <section class="row">
+          <div class="col-12 col-lg-9">
+            <div class="markdown-text">
+              {% with_shortcodes training.summary_rendered %}
+            </div>
+          </div>
+        </section>
       </div>
     </div>
   </section>