Model Examples
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
Line 11: Line 11:
     .heading {
     .heading {
         color: #F67A07;
         color: #F67A07;
         font-size: 2.25em; /* default font size */
         font-size: 2.25em;
         font-weight: 700;
         font-weight: 700;
         text-transform: uppercase;
         text-transform: uppercase;
     }
     }
     .description, .sub-heading, .search-input {
     .description, .sub-heading, .search-input {
         font-size: 16px; /* default font size for sub-elements */
         font-size: 16px;
     }
     }
     @media (max-width: 767px) {
     @media (max-width: 767px) {
Line 149: Line 149:
@media (max-width: 768px) {
@media (max-width: 768px) {
   .sidebar, .search-container {
   .sidebar, .search-container {
     display: none; /* Hide sidebar and search container on mobile */
     display: none;
   }
   }


.card-container, .card-container-3 {
.card-container, .card-container-3 {
     grid-template-columns: 1fr; /* Full width for the grid column */
     grid-template-columns: 1fr;
     padding: 0 15px; /* Adjust padding as needed */
     padding: 0 15px;  
     grid-gap: 20px; /* Adjust grid gap as needed */
     grid-gap: 20px;
   }
   }


.cards {
.cards {
     margin-bottom: 20px; /* Adjust space between card rows as needed */
     margin-bottom: 20px;
     width: auto; /* Auto width for flexibility */
     width: auto;
     max-width: 296px; /* Maximum width set to original width, can adjust if needed */
     max-width: 296px;
     box-sizing: border-box; /* Include padding in the width calculation */
     box-sizing: border-box;
    margin: 10px auto;
   }
   }
   }
   }
Line 212: Line 213:
     .cards {
     .cards {
       flex-direction: column;
       flex-direction: column;
      margin: 10px auto;
     }
     }



Revision as of 20:05, 1 February 2024

Model Examples
MODEL EXAMPLES
Get started with MDriven sample models. Explore and choose what you want to build.

Complete Models

Use ready-made "complete system" (model+data) to apply to an existing turnkey site.
Placeholder
Gantt Chart Interactive
Use this when you need to show and interact with data in a timeline.
Download .zip
Placeholder
Gantt Chart Interactive
Use this when you need to show and interact with data in a timeline.
Download .zip
Placeholder
Gantt Chart Interactive
Use this when you need to show and interact with data in a timeline.
Download .zip