Best Practices
No edit summary
Tags: Reverted 2017 source edit
No edit summary
Tag: 2017 source edit
(9 intermediate revisions by the same user not shown)
Line 3: Line 3:
<style>
<style>


    .bestpractices-card:hover {
.bestpractices-card:hover {
        transform: translateY(-5px);
    transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
}
 
.mw-parser-output > *:first-child {
        display: none;
    }


.mw-parser-output > *:first-child {
    display: none;
}
.header3 {
.header3 {
        padding: 2rem 5em;
  padding: 2rem 5em;
    }
}


.contentHeader {
.contentHeader {
        padding: 5em;
  padding: 5em;
    }
  margin-bottom: 2em;
}


.heading {
.heading {
        font-size: 2.25em;
  font-size: 2.25em;  
    }
}


.grid-container {
.grid-container {
        display: grid;
    display: grid;
        padding: 0 5em;
    padding: 0 5em;
        grid-template-columns: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    gap: 20px;
        grid-auto-rows: minmax(100px, auto);
    grid-auto-rows: minmax(100px, auto);
    }
}
 


@media (max-width: 767px) {
    @media (max-width: 767px) {
         .contentHeader {
         .contentHeader {
             padding: 2em 1em;
             padding: 2em 1em;
             max-width: none;
             max-width: none;
         }
         }
 
        .heading {
.heading {
             font-size: 1.5em;
             font-size: 1.5em;
         }
         }
 
        .sub-heading {
.sub-heading {
             font-size: 1em;
             font-size: 1em;
         }
         }
 
        .description {
.description {
             font-size: 0.875em;
             font-size: 0.875em;
         }
         }
 
        .input-container {
.input-container {
             max-width: none;
             max-width: none;
             height: auto;
             height: auto;
         }
         }
 
        .search-icon {
.search-icon {
             margin-left: 1em;
             margin-left: 1em;
         }
         }
 
        .search-input {
.search-input {
             padding-left: 1em;
             padding-left: 1em;
             padding-right: 1em;
             padding-right: 1em;
         }
         }


.header3 {
      .header3 {
            padding: 2rem 1em;
          padding: 2rem 1em;
        }
      }
 
      .grid-container {
.grid-container {
    grid-template-columns: 1fr !important;
            grid-template-columns: 1fr !important;
    padding: 0 2em !important;
            padding: 0 2em !important;
}
        }
 
.bestpractices-card {
            height: auto;
            padding: 20px;
        }
 
.bestpractices-card span {
            font-size: 18px;
        }
     }
     }


Line 93: Line 78:
</div>
</div>


<div class="grid-container">
<div style="display: grid; padding: 0 5em; grid-template-columns: repeat(2, 1fr); gap: 20px; grid-auto-rows: minmax(100px, auto);" class="grid-container">


</html>
</html>

Revision as of 06:51, 7 August 2024

Best practices
BEST PRACTICES
Suggestions and ideas on how to creatively use MDriven tools.