css page site mobiel

This commit is contained in:
2024-11-05 21:45:42 +01:00
parent d516369a78
commit 52b22009fc
3 changed files with 68 additions and 24 deletions

View File

@@ -2914,7 +2914,7 @@ body {
.node-type-site .layout--threecol-25-50-25 {
flex-wrap: nowrap;
}
@media (max-width: 500px) {
@media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 {
display: flex;
flex-direction: column;
@@ -2927,12 +2927,23 @@ body {
flex-direction: column;
align-items: center;
}
@media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--first {
flex: 0 1 100%;
}
}
.node-type-site .layout--threecol-25-50-25 .layout__region--first .block-region-first {
position: fixed;
display: flex;
flex-direction: column;
width: 20% !important;
}
@media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--first .block-region-first {
position: relative;
width: 100% !important;
}
}
.node-type-site .layout--threecol-25-50-25 .layout__region--first .block-region-first .views-element-container {
margin-bottom: 3rem;
}
@@ -2940,10 +2951,21 @@ body {
width: fit-content;
margin-bottom: 0.5rem;
}
@media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--first div {
margin: auto;
}
}
.node-type-site .layout--threecol-25-50-25 .layout__region--first div #sites-map-container {
left: -50px;
}
@media (max-width: 500px) {
@media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--first div #sites-map-container {
left: 0;
height: fit-content;
}
}
@media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) {
margin-top: 1rem;
}
@@ -2978,7 +3000,7 @@ body {
padding-left: 0.2rem;
padding-bottom: 0.2rem;
}
@media (max-width: 500px) {
@media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) {
margin-top: 1rem;
}
@@ -2992,7 +3014,8 @@ body {
}
@media (max-width: 810px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site {
margin-left: 0;
max-width: 50%;
margin: auto;
}
}
.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site a {

View File

@@ -9,7 +9,7 @@
.layout--threecol-25-50-25{
flex-wrap: nowrap;
@media(max-width: 500px){
@media(max-width: 810px){
display: flex;
flex-direction: column;
width: 100%;
@@ -19,12 +19,18 @@
display: flex;
flex-direction: column;
align-items: center;
@media(max-width: 810px){
flex: 0 1 100%;
}
.block-region-first{
position: fixed;
display: flex;
flex-direction: column;
width: 20% !important;
@media(max-width: 810px){
position: relative;
width: 100% !important;
}
.views-element-container{
margin-bottom: 3rem;
}
@@ -32,15 +38,22 @@
div{
width: fit-content;
margin-bottom: 0.5rem;
@media(max-width: 810px){
margin: auto;
}
#sites-map-container{
// width: auto;
// left: 0.3rem;
left: -50px;
@media(max-width: 810px){
left: 0;
height: fit-content;
}
}
}
div:has(.field_field_documents){
// margin: auto;
@media(max-width: 500px){
@media(max-width: 810px){
margin-top: 1rem;
}
@@ -78,7 +91,7 @@
div:has(.field_field_liens_site){
// margin: auto;
// width: 50%;
@media(max-width: 500px){
@media(max-width: 810px){
margin-top: 1rem;
}
@@ -89,7 +102,9 @@
background: black;
padding-left: 0.5rem;
@media (max-width:810px) {
margin-left: 0;
// margin-left: 0;
max-width: 50%;
margin: auto;
}
a{