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 { | |||
transform: translateY(-5px); | |||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |||
} | |||
.mw-parser-output > *:first-child { | |||
display: none; | |||
} | |||
.header3 { | .header3 { | ||
padding: 2rem 5em; | |||
} | |||
.contentHeader { | .contentHeader { | ||
padding: 5em; | |||
margin-bottom: 2em; | |||
} | |||
.heading { | .heading { | ||
font-size: 2.25em; | |||
} | |||
.grid-container { | .grid-container { | ||
display: grid; | |||
padding: 0 5em; | |||
grid-template-columns: repeat(2, 1fr); | |||
gap: 20px; | |||
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; | |||
} | |||
.grid-container { | |||
.grid-container { | grid-template-columns: 1fr !important; | ||
padding: 0 2em !important; | |||
} | |||
} | } | ||
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.