Responsive table on termine page! Woohoo!

This commit is contained in:
Reto Bollinger 2024-11-19 15:10:21 +01:00
parent e4c4875fa0
commit 835da7ccb8

View file

@ -134,7 +134,7 @@ div.page {
.termine li {
display: flex;
margin-bottom: 10px;
margin-bottom: 3px;
}
@ -214,6 +214,56 @@ div.page {
.inner_page.bgimage .image img {
width: 80%
}
.termine ul {
display: table;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.termine ul li{
display: table-row;
width: 75vw;
padding: 0;
margin: 0;
}
.termine ul li div{
width: 70vw;
text-align: left;
padding: 0;
margin: 0;
display: inline-block;
white-space: nowrap;
}
.termine ul li ul {
display: table-row;
}
.termine ul li ul div{
font-weight: normal;
padding: 0;
margin: 0;
text-align: left;
}
.termine ul li ul li {
display: table-cell;
}
.termine li ul li:nth-child(1) { width: 40.5vw; }
.termine li ul li:nth-child(2) { width: 1.5vw; }
.termine li ul li:nth-child(3) { width: 33vw; }
.termine li ul li:nth-child(1) div{ width: 40.5vw; }
.termine li ul li:nth-child(2) div{ width: 1.5vw; }
.termine li ul li:nth-child(3) div{ width: 33vw; }
.termine ul > li > div, .termine ul > li > ul > li > div {
font-size: 4vw;
}
}
@media (min-width:1025px) and (max-width:1540px) {
@ -299,4 +349,55 @@ div.page {
.inner_page.bgimage .image img{
width: 150px
}
.termine ul {
display: table;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.termine ul li{
display: table-row;
width: 75vw;
padding: 0;
margin: 0;
}
.termine ul li div{
width: 70vw;
text-align: left;
padding: 0;
margin: 0;
display: inline-block;
white-space: nowrap;
}
.termine ul li ul {
display: table-row;
}
.termine ul li ul div{
font-weight: normal;
padding: 0;
margin: 0;
text-align: left;
}
.termine ul li ul li {
display: table-cell;
}
.termine li ul li:nth-child(1) { width: 40.5vw; }
.termine li ul li:nth-child(2) { width: 1.5vw; }
.termine li ul li:nth-child(3) { width: 33vw; }
.termine li ul li:nth-child(1) div{ width: 40.5vw; }
.termine li ul li:nth-child(2) div{ width: 1.5vw; }
.termine li ul li:nth-child(3) div{ width: 33vw; }
.termine ul > li > div, .termine ul > li > ul > li > div {
font-size: 2.5vw;
}
}