Widget
BestPractices
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<div style="display: flex; align-items: center; padding: 10px; background: #E3E8EE; border-radius: 5px; margin-bottom: 10px; width: 350.75px; height: 120px;"> | <style> | ||
/* Responsive Styles for Mobile Devices */ | |||
@media (max-width: 767px) { | |||
.card { | |||
flex-direction: column; | |||
width: auto; /* Adjust width for smaller screens */ | |||
height: auto; /* Adjust height for smaller screens */ | |||
align-items: center; /* Center-align items for vertical stacking */ | |||
} | |||
.card-logo { | |||
width: 100%; /* Full width for the logo */ | |||
justify-content: center; /* Center logo horizontally */ | |||
} | |||
.card-content { | |||
padding-left: 0; /* Remove left padding on smaller screens */ | |||
padding-top: 10px; /* Add top padding for spacing */ | |||
align-items: center; /* Center-align text content */ | |||
} | |||
} | |||
</style> | |||
<div class="card" style="display: flex; align-items: center; padding: 10px; background: #E3E8EE; border-radius: 5px; margin-bottom: 10px; width: 350.75px; height: 120px;"> | |||
<!-- Image logo on the left --> | |||
<div class="card-logo" style="flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; width: 50px;"> | |||
<img src="<!--{$imageUrl|default:'https://newwiki.mdriven.net/images/MDrivenBestPractices.svg'}-->" alt="Logo" style="max-width: 100%; max-height: 100%;"> | |||
</div> | |||
<!-- Text content with heading and description on the right --> | |||
<div class="card-content" style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center; padding-left: 10px;"> | |||
<a href="<!--{$headingLink|default:'#'}-->" style="color: #1A50AD; font-size: 20px; font-weight: 700; text-decoration: none;"> | |||
<!--{$heading|default:'Heading'}--> | |||
</a> | |||
<div style="color: #44546F; font-size: 14px; margin-top: 5px;"> | |||
<!--{$description|default:'Description'}--> | |||
</div> | |||
</div> | </div> | ||
</div> | </div> | ||
Revision as of 23:28, 17 December 2023
<style>
/* Responsive Styles for Mobile Devices */
@media (max-width: 767px) {
.card {
flex-direction: column;
width: auto; /* Adjust width for smaller screens */
height: auto; /* Adjust height for smaller screens */
align-items: center; /* Center-align items for vertical stacking */
}
.card-logo {
width: 100%; /* Full width for the logo */
justify-content: center; /* Center logo horizontally */
}
.card-content {
padding-left: 0; /* Remove left padding on smaller screens */
padding-top: 10px; /* Add top padding for spacing */
align-items: center; /* Center-align text content */
}
}
</style>
<img src="" alt="Logo" style="max-width: 100%; max-height: 100%;">
<a href="" style="color: #1A50AD; font-size: 20px; font-weight: 700; text-decoration: none;">
</a>
This page was edited more than 11 months ago on 02/10/2024. What links here