Adresse
Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn
Die Color-Section hat die ID: grid_layout
#grid_layout .entry-content-wrapper {
margin: 0;
display: grid;
gap: 20px 20px;
grid-auto-flow: row;
grid-template-columns: 80px 2fr 1fr 1fr; /*** also 4 Spalten ***/
grid-template-rows: 1fr 1fr 1fr; /*** also 3 Zeilen ***/
grid-template-areas:
"feld1 feld2 feld3 feld4"
"feld1 feld5 feld6 feld7"
"feld1 feld8 feld9 feld10";
}
/*** ich blende die mal aus - könnten stören ***/
#grid_layout .entry-content-wrapper:before,
#grid_layout .entry-content-wrapper:after {
display: none;
}
/*** Aufhebung der Enfold bestehenden Regeln ***/
#grid_layout .entry-content-wrapper .flex_column {
margin: unset !important;
width: unset !important;
padding: 20px;
}
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(1) .av-special-heading {
width: 100%;
-ms-writing-mode:tb-rl;
writing-mode:vertical-rl;
transform:rotate(180deg);
}
/*** die Umsetzung/Benennung der Grid Areas ***/
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(1) { grid-area: feld1; display: grid; justify-content: center }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(2) { grid-area: feld2; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(3) { grid-area: feld3; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(4) { grid-area: feld4; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(5) { grid-area: feld5; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(6) { grid-area: feld6; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(7) { grid-area: feld7; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(8) { grid-area: feld8; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(9) { grid-area: feld9; }
#grid_layout .entry-content-wrapper .flex_column:nth-of-type(10) { grid-area: feld10; }
/*** responsive Veränderung des Grid Layouts ***/
@media only screen and (max-width: 767px) {
#grid_layout .entry-content-wrapper {
grid-template-columns: 80px 1fr 1fr; /*** also 3 Spalten ***/
grid-template-rows: 2fr 1fr 2fr 1fr 2fr 1fr; /*** also 6 Zeilen ***/
gap: 10px 10px;
grid-template-areas:
"feld1 feld2 feld2"
"feld1 feld3 feld4"
"feld1 feld5 feld5"
"feld1 feld6 feld7"
"feld1 feld8 feld8"
"feld1 feld9 feld10";
}
}