Dear community members,
I am creating a new template i would like to share with the community. It uses css grid layout system but i meet the following problem.
Part one :
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 1fr 200px;
grid-template-rows: auto;
gap: 10px 10px;
grid-template-areas:
"top top top top"
"left main main right"
"copy copy comment comment"
"bottom bottom bottom bottom";
}
.top { grid-area: top; }
.bottom { grid-area: bottom; }
.left { grid-area: left; }
.right { grid-area: right; }
.main { grid-area: main; }
.copy { grid-area: copy; }
.comment { grid-area: comment; }
This above code concern the standard display (ie large screen)
Then, the code displaying small and medium screens ;
Part two :
@media only screen and (max-width: 992px) {
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px 10px;
grid-template-areas:
"top top top top"
"left left left left"
"main main main main"
"right right right right"
"copy copy copy copy"
"comment comment comment comment"
"bottom bottom bottom bottom";
}
.top { grid-area: top; }
.left { grid-area: left; }
.main { grid-area: main; }
.right { grid-area: right; }
.copy { grid-area: copy; }
.comment { grid-area: comment; }
.bottom { grid-area: bottom; }
}
I wrote this entire code into a file "structure.css " and added it to the file "style.ini" :
css/structure.css = screen
The part one of css rules is returned correctly.
The part two do not work at all.
The fumy thing is : if i delete the part two from structure.css and i add it directly on the bottom of my file "main.php" it is working well :
<style>
@media only screen and (max-width: 992px) {
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px 10px;
grid-template-areas:
"top top top top"
"left left left left"
"main main main main"
"right right right right"
"copy copy copy copy"
"comment comment comment comment"
"bottom bottom bottom bottom";
}
.top { grid-area: top; }
.left { grid-area: left; }
.main { grid-area: main; }
.right { grid-area: right; }
.copy { grid-area: copy; }
.comment { grid-area: comment; }
.bottom { grid-area: bottom; }
}
</style>
I do not understand why those part two rules have no effect placed into the css file but works into the main.phpfile
Any clue will help me to understand and solve this problem.
Thanks in advance.