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";
}
}
Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen