feld1
Click here to add your own text
feld2
feld3
to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text
feld1
Click here to add your own text
feld2
feld3
to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text
feld1
Click here to add your own text
feld2
feld3
to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click here to add your own text Click
#top .avia-section.grid-layout .container {
max-width: 100%;
/*! padding: 0; */
}
/* === just a naming of the areas === */
#top .avia-section.grid-layout .entry-content-wrapper .flex_column:nth-child(1) { grid-area: feld1; }
#top .avia-section.grid-layout .entry-content-wrapper .flex_column:nth-child(2) { grid-area: feld2; }
#top .avia-section.grid-layout .entry-content-wrapper .flex_column:nth-child(3) { grid-area: feld3; }
#top .avia-section.grid-layout .entry-content-wrapper {
display: grid;
gap: 20px;
grid-auto-flow: row;
grid-template-columns: 2fr 180px 6fr;
grid-template-areas: "feld1 feld2 feld3";
}
#top .avia-section.grid-layout .entry-content-wrapper .flex_column {
width: unset; /* === is determined now by grid-template-columns === */
justify-self: start;
align-self: start;
}
@media only screen and (max-width: 989px) {
#top .avia-section.grid-layout .entry-content-wrapper {
grid-template-columns: 2fr 5fr;
grid-template-areas:
"feld1 feld3"
"feld2 feld3";
}
}/* === different responsive Alternative === */
/* === see responsive behaviour on last color-section === */
@media only screen and (max-width: 989px) {
#top .avia-section.grid-layout .entry-content-wrapper {
grid-template-columns: 1fr 2fr; /* === similar to 1/3 , 2/3 === */
grid-template-areas:
"feld2 feld1"
"feld3 feld3";
}
#top .avia-section.grid-layout .entry-content-wrapper .flex_column {
justify-self: stretch;
align-self: stretch;
}
}dev-tools to the grid layout
Webers Webdesign
Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn
Mit dem Laden der Karte akzeptieren Sie die Datenschutzerklärung von Google.
Mehr erfahren