Mudanças entre as edições de "Widget:Mainpageresponsive"
Ir para navegação
Ir para pesquisar
(Criou página com '<style> →Evita forçar cascata em telas médias: @media (max-width: 1180px) { .homepage-content { flex-direction: column !important; } .menu-col,...') |
m |
||
| Linha 1: | Linha 1: | ||
<style> | <style> | ||
@media (max-width: 900px) { | |||
@media (max-width: | |||
.homepage-content { | .homepage-content { | ||
flex-direction: column !important; | flex-direction: column !important; | ||
| Linha 14: | Linha 13: | ||
} | } | ||
@supports (container-type: inline-size) { | @supports (container-type: inline-size) { | ||
.homepage-content { | .homepage-content { | ||
| Linha 21: | Linha 19: | ||
} | } | ||
@container mainpage (max-width: | @container mainpage (max-width: 900px) { | ||
.homepage-content { | .homepage-content { | ||
flex-direction: column !important; | flex-direction: column !important; | ||
| Linha 35: | Linha 33: | ||
} | } | ||
</style> | </style> | ||
<script> | <script> | ||
(function () { | (function () { | ||
| Linha 44: | Linha 41: | ||
if (!content || !menuCol || !sideCol) return; | if (!content || !menuCol || !sideCol) return; | ||
const shouldCollapse = content.offsetWidth <= | const shouldCollapse = content.offsetWidth <= 900; | ||
content.style.flexDirection = shouldCollapse ? 'column' : ''; | content.style.flexDirection = shouldCollapse ? 'column' : ''; | ||
Edição atual tal como às 20h48min de 26 de junho de 2025
<style>
@media (max-width: 900px) {
.homepage-content {
flex-direction: column !important;
}
.menu-col,
.side-col {
min-width: 100% !important;
width: 100% !important;
flex: 1 1 100% !important;
}
}
@supports (container-type: inline-size) {
.homepage-content {
container-type: inline-size;
container-name: mainpage;
}
@container mainpage (max-width: 900px) {
.homepage-content {
flex-direction: column !important;
}
.menu-col,
.side-col {
width: 100% !important;
min-width: 100% !important;
flex: 1 1 100% !important;
}
}
}
</style> <script>
(function () {
function checkCollapseLayout() {
const content = document.querySelector('.homepage-content');
const menuCol = document.querySelector('.menu-col');
const sideCol = document.querySelector('.side-col');
if (!content || !menuCol || !sideCol) return;
const shouldCollapse = content.offsetWidth <= 900;
content.style.flexDirection = shouldCollapse ? 'column' : ;
[menuCol, sideCol].forEach(el => {
el.style.minWidth = shouldCollapse ? '100%' : ;
el.style.width = shouldCollapse ? '100%' : ;
el.style.flex = shouldCollapse ? '1 1 100%' : ;
});
}
window.addEventListener('resize', checkCollapseLayout);
document.addEventListener('DOMContentLoaded', checkCollapseLayout);
})();
</script>