2
Click here to add your own text
4
Click here to add your own text
6
Click here to add your own text
8
Click here to add your own text
10
Click here to add your own text
12
Click here to add your own text
14
Click here to add your own text
color-section with custom class: grid5
/*** to have the same width as a grid-row - set the width of the container to 100% ***/
.responsive .grid5 .container {
max-width: 100%;
}
/*** name the Grid Areas ***/
.grid5 .entry-content-wrapper .flex_column:nth-of-type(1) { grid-area: feld1; }
.grid5 .entry-content-wrapper .flex_column:nth-of-type(2) { grid-area: feld2; }
.grid5 .entry-content-wrapper .flex_column:nth-of-type(3) { grid-area: feld3; }
.grid5 .entry-content-wrapper .flex_column:nth-of-type(4) { grid-area: feld4; }
.grid5 .entry-content-wrapper .flex_column:nth-of-type(5) { grid-area: feld5; }
.grid5 .entry-content-wrapper .flex_column:nth-of-type(6) { grid-area: feld6; }
.grid5 .entry-content-wrapper .flex_column:nth-of-type(7) { grid-area: feld7; }
.grid5 .entry-content-wrapper .flex_column:nth-of-type(8) { grid-area: feld8; }
.grid5 .entry-content-wrapper .flex_column:nth-of-type(9) { grid-area: feld9; }
.grid5 .entry-content-wrapper .flex_column:nth-of-type(10) { grid-area: feld10; }
.grid5 .entry-content-wrapper .flex_column:nth-of-type(11) { grid-area: feld11; }
.grid5 .entry-content-wrapper .flex_column:nth-of-type(12) { grid-area: feld12; }
.grid5 .entry-content-wrapper .flex_column:nth-of-type(13) { grid-area: feld13; }
.grid5 .entry-content-wrapper .flex_column:nth-of-type(14) { grid-area: feld14; }
.grid5 .entry-content-wrapper .flex_column:nth-of-type(15) { grid-area: feld15; }
.grid5 .entry-content-wrapper {
display: grid;
margin: 0;
gap: 40px;
grid-auto-flow: row;
grid-template-columns: repeat(5, 1fr); /*** 5 cells besides each other with same width ( 1 fraction ) ***/
grid-template-areas:
"feld1 feld2 feld3 feld4 feld5"
"feld6 feld7 feld8 feld9 feld10"
"feld11 feld12 feld13 feld14 feld15";
}
/*** because pseudo containers would also be subject to the grid layout, so we had to get rid of them ***/
.grid5 .entry-content-wrapper:before,
.grid5 .entry-content-wrapper:after {
display: none
}
/*** Cancel Enfold Theme Settings ***/
.grid5 .entry-content-wrapper .flex_column {
width: unset !important;
margin: 0 !important;
padding: 20px;
background-color: #ddd
}
/*** Modern browsers can do this - it's not absolutely necessary *****/
/*** - but I didn't want to have to edit each column again afterwards. *****/
.grid5 .entry-content-wrapper .flex_column:has(img) {
padding: 0px;
}
/*** to have the chance to handle the images like background-images - see next rule with property : object-fit: cover ***/
.grid5 .entry-content-wrapper .flex_column .avia-image-container,
.grid5 .entry-content-wrapper .flex_column .avia-image-container-inner,
.grid5 .entry-content-wrapper .flex_column .avia-image-container-inner a,
.grid5 .entry-content-wrapper .flex_column .avia-image-overlay-wrap {
width: 100% !important;
height: 100% !important;
}
.grid5 .entry-content-wrapper .flex_column img {
object-fit: cover !important;
width: 100% !important;
height: 100% !important;
}
/* ======= Media Query Settings ========*/
/* ==== It is now entirely up to you when you reduce the number of columns within a row ========*/
@media only screen and (min-width: 768px) and (max-width: 1090px) {
.grid5 .entry-content-wrapper {
gap: 20px;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"feld1 feld2 feld3"
"feld4 feld5 feld6"
"feld7 feld8 feld9"
"feld10 feld11 feld12"
"feld13 feld14 feld15";
}
}
@media only screen and (min-width: 550px) and (max-width: 767px) {
.grid5 .entry-content-wrapper {
gap: 20px;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"feld1 feld2"
"feld3 feld2"
"feld4 feld5"
"feld6 feld7"
"feld8 feld9"
"feld10 feld11"
"feld12 feld13"
"feld14 feld15";
}
}
@media only screen and (max-width: 549px) {
.grid5 .entry-content-wrapper {
gap: 20px;
grid-template-columns: repeat(1, 1fr);
grid-template-areas:
"feld1"
"feld2"
"feld3"
"feld4"
"feld5"
"feld10"
"feld6"
"feld7"
"feld8"
"feld9"
"feld11"
"feld12"
"feld13"
"feld14"
"feld15";
}
}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