Training:Videos: Difference between revisions

Videos

Revision as of 22:35, 18 January 2024

Training

EXPLORE MDriven through Video

INTRODUCING THE MDRIVEN VIDEO EXPERIENCE
Watch videos tailored to simplify everything you need to know about MDriven.

Check out the official MDriven YouTube here: www.youtube.com/@MDrivenOfficial

Continue watching

MDriven designer installation Interface Overview :

@@ Line 77: / Line 77: @@
      <style>
-       .video {
+      .video {
              display: flex;
-             flex-direction: row-reverse; /* Navigation on the right */
+             flex-direction: row; /* Navigation on the right */
              max-width: 100%;
              box-shadow: 0 4px 8px rgba(0,0,0,0.1);
              margin: 20px;
              overflow: hidden; /* Hide overflow */
-             max-height: 500px; /* Maximum height for the video and navigation container */
+             align-items: flex-start; /* Align items to the top */
          }
 .video__wrapper {
-             flex-grow: 1; /* Video takes remaining space */
+             flex: 0 0 760px; /* Maximum width of the video */
              position: relative;
              padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
              height: 0;
-             max-height: 100%; /* Limit height to parent container */
+             max-height: 500px; /* Maximum height for the video */
          }
@@ Line 105: / Line 105: @@
 .video__navigation {
-             flex-basis: 300px; /* Width of the navigation panel */
+             flex: 0 0 210px; /* Maximum width of the navigation */
              padding: 10px;
              background: #f7f7f7;
@@ Line 112: / Line 112: @@
              font-size: 14px;
              overflow-y: auto; /* Scrollbar for overflow */
-             max-height: 100%; /* Limit height to parent container */
+             max-height: 500px; /* Maximum height for the navigation */
              border-left: 1px solid #ccc;
              list-style: none;
@@ Line 139: / Line 139: @@
 .video__wrapper {
                  padding-bottom: 56.25%;
+                flex-basis: auto;
              }