eSales Media Git repositories
Browse code

Fix width issue with vertical alignment in GridPlacementWrapper

Benjamin Roth authored on25/04/2025 16:21:26
Showing3 changed files
public/css/grid-placement-wrapper.css
History View file @76e6ab7
... ... 
@@ -418,6 +418,10 @@
418 418 
   }
419 419 
 }
420 420
421 
+.grid-placement-fragments {
422 
+  width: 100%;
423 
+}
424 
+
421 425 
 .content-grid-placement-wrapper {
422 426 
   display: flex;
423 427 
 }
public/css/grid-placement-wrapper.min.css
History View file @76e6ab7
... ... 
@@ -1 +1 @@
1 
-:root{--grid-columns:12;--grid-rows:7}.gp--col-start-1{grid-column-start:1}.gp--col-end-2{grid-column-end:2}.gp--col-start-2{grid-column-start:2}.gp--col-end-3{grid-column-end:3}.gp--col-start-3{grid-column-start:3}.gp--col-end-4{grid-column-end:4}.gp--col-start-4{grid-column-start:4}.gp--col-end-5{grid-column-end:5}.gp--col-start-5{grid-column-start:5}.gp--col-end-6{grid-column-end:6}.gp--col-start-6{grid-column-start:6}.gp--col-end-7{grid-column-end:7}.gp--col-start-7{grid-column-start:7}.gp--col-end-8{grid-column-end:8}.gp--col-start-8{grid-column-start:8}.gp--col-end-9{grid-column-end:9}.gp--col-start-9{grid-column-start:9}.gp--col-end-10{grid-column-end:10}.gp--col-start-10{grid-column-start:10}.gp--col-end-11{grid-column-end:11}.gp--col-start-11{grid-column-start:11}.gp--col-end-12{grid-column-end:12}.gp--col-start-12{grid-column-start:12}.gp--col-end-13{grid-column-end:13}.gp--row-start-1{grid-row-start:1}.gp--row-end-2{grid-row-end:2}.gp--row-start-2{grid-row-start:2}.gp--row-end-3{grid-row-end:3}.gp--row-start-3{grid-row-start:3}.gp--row-end-4{grid-row-end:4}.gp--row-start-4{grid-row-start:4}.gp--row-end-5{grid-row-end:5}.gp--row-start-5{grid-row-start:5}.gp--row-end-6{grid-row-end:6}.gp--row-start-6{grid-row-start:6}.gp--row-end-7{grid-row-end:7}.gp--row-start-7{grid-row-start:7}.gp--row-end-8{grid-row-end:8}@media (max-width:900px){.gp--col-tablet-start-1{grid-column-start:1}.gp--col-tablet-end-2{grid-column-end:2}.gp--col-tablet-start-2{grid-column-start:2}.gp--col-tablet-end-3{grid-column-end:3}.gp--col-tablet-start-3{grid-column-start:3}.gp--col-tablet-end-4{grid-column-end:4}.gp--col-tablet-start-4{grid-column-start:4}.gp--col-tablet-end-5{grid-column-end:5}.gp--col-tablet-start-5{grid-column-start:5}.gp--col-tablet-end-6{grid-column-end:6}.gp--col-tablet-start-6{grid-column-start:6}.gp--col-tablet-end-7{grid-column-end:7}.gp--col-tablet-start-7{grid-column-start:7}.gp--col-tablet-end-8{grid-column-end:8}.gp--col-tablet-start-8{grid-column-start:8}.gp--col-tablet-end-9{grid-column-end:9}.gp--col-tablet-start-9{grid-column-start:9}.gp--col-tablet-end-10{grid-column-end:10}.gp--col-tablet-start-10{grid-column-start:10}.gp--col-tablet-end-11{grid-column-end:11}.gp--col-tablet-start-11{grid-column-start:11}.gp--col-tablet-end-12{grid-column-end:12}.gp--col-tablet-start-12{grid-column-start:12}.gp--col-tablet-end-13{grid-column-end:13}.gp--row-tablet-start-1{grid-row-start:1}.gp--row-tablet-end-2{grid-row-end:2}.gp--row-tablet-start-2{grid-row-start:2}.gp--row-tablet-end-3{grid-row-end:3}.gp--row-tablet-start-3{grid-row-start:3}.gp--row-tablet-end-4{grid-row-end:4}.gp--row-tablet-start-4{grid-row-start:4}.gp--row-tablet-end-5{grid-row-end:5}.gp--row-tablet-start-5{grid-row-start:5}.gp--row-tablet-end-6{grid-row-end:6}.gp--row-tablet-start-6{grid-row-start:6}.gp--row-tablet-end-7{grid-row-end:7}.gp--row-tablet-start-7{grid-row-start:7}.gp--row-tablet-end-8{grid-row-end:8}}@media (max-width:599px){.gp--col-mobil-start-1{grid-column-start:1}.gp--col-mobil-end-2{grid-column-end:2}.gp--col-mobil-start-2{grid-column-start:2}.gp--col-mobil-end-3{grid-column-end:3}.gp--col-mobil-start-3{grid-column-start:3}.gp--col-mobil-end-4{grid-column-end:4}.gp--col-mobil-start-4{grid-column-start:4}.gp--col-mobil-end-5{grid-column-end:5}.gp--col-mobil-start-5{grid-column-start:5}.gp--col-mobil-end-6{grid-column-end:6}.gp--col-mobil-start-6{grid-column-start:6}.gp--col-mobil-end-7{grid-column-end:7}.gp--col-mobil-start-7{grid-column-start:7}.gp--col-mobil-end-8{grid-column-end:8}.gp--col-mobil-start-8{grid-column-start:8}.gp--col-mobil-end-9{grid-column-end:9}.gp--col-mobil-start-9{grid-column-start:9}.gp--col-mobil-end-10{grid-column-end:10}.gp--col-mobil-start-10{grid-column-start:10}.gp--col-mobil-end-11{grid-column-end:11}.gp--col-mobil-start-11{grid-column-start:11}.gp--col-mobil-end-12{grid-column-end:12}.gp--col-mobil-start-12{grid-column-start:12}.gp--col-mobil-end-13{grid-column-end:13}.gp--row-mobil-start-1{grid-row-start:1}.gp--row-mobil-end-2{grid-row-end:2}.gp--row-mobil-start-2{grid-row-start:2}.gp--row-mobil-end-3{grid-row-end:3}.gp--row-mobil-start-3{grid-row-start:3}.gp--row-mobil-end-4{grid-row-end:4}.gp--row-mobil-start-4{grid-row-start:4}.gp--row-mobil-end-5{grid-row-end:5}.gp--row-mobil-start-5{grid-row-start:5}.gp--row-mobil-end-6{grid-row-end:6}.gp--row-mobil-start-6{grid-row-start:6}.gp--row-mobil-end-7{grid-row-end:7}.gp--row-mobil-start-7{grid-row-start:7}.gp--row-mobil-end-8{grid-row-end:8}}@media (min-width:900px){.grid-placement-content.-va-desktop-center{display:flex;align-items:center}.grid-placement-content.-va-desktop-bottom{display:flex;align-items:flex-end}}@media (max-width:900px){.grid-placement-content.-va-tablet-center{display:flex;align-items:center}.grid-placement-content.-va-tablet-bottom{display:flex;align-items:flex-end}}@media (max-width:599px){.grid-placement-content.-va-mobile-center{display:flex;align-items:center}.grid-placement-content.-va-mobile-bottom{display:flex;align-items:flex-end}}.content-grid-placement-wrapper{display:flex;min-height:100%;width:100%}.gp--grid-container{min-height:100%;width:100%;display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));grid-template-rows:repeat(var(--grid-rows),minmax(0,auto))}
2 1 
\ No newline at end of file
2 
+:root{--grid-columns:12;--grid-rows:7}.gp--col-start-1{grid-column-start:1}.gp--col-end-2{grid-column-end:2}.gp--col-start-2{grid-column-start:2}.gp--col-end-3{grid-column-end:3}.gp--col-start-3{grid-column-start:3}.gp--col-end-4{grid-column-end:4}.gp--col-start-4{grid-column-start:4}.gp--col-end-5{grid-column-end:5}.gp--col-start-5{grid-column-start:5}.gp--col-end-6{grid-column-end:6}.gp--col-start-6{grid-column-start:6}.gp--col-end-7{grid-column-end:7}.gp--col-start-7{grid-column-start:7}.gp--col-end-8{grid-column-end:8}.gp--col-start-8{grid-column-start:8}.gp--col-end-9{grid-column-end:9}.gp--col-start-9{grid-column-start:9}.gp--col-end-10{grid-column-end:10}.gp--col-start-10{grid-column-start:10}.gp--col-end-11{grid-column-end:11}.gp--col-start-11{grid-column-start:11}.gp--col-end-12{grid-column-end:12}.gp--col-start-12{grid-column-start:12}.gp--col-end-13{grid-column-end:13}.gp--row-start-1{grid-row-start:1}.gp--row-end-2{grid-row-end:2}.gp--row-start-2{grid-row-start:2}.gp--row-end-3{grid-row-end:3}.gp--row-start-3{grid-row-start:3}.gp--row-end-4{grid-row-end:4}.gp--row-start-4{grid-row-start:4}.gp--row-end-5{grid-row-end:5}.gp--row-start-5{grid-row-start:5}.gp--row-end-6{grid-row-end:6}.gp--row-start-6{grid-row-start:6}.gp--row-end-7{grid-row-end:7}.gp--row-start-7{grid-row-start:7}.gp--row-end-8{grid-row-end:8}@media (max-width:900px){.gp--col-tablet-start-1{grid-column-start:1}.gp--col-tablet-end-2{grid-column-end:2}.gp--col-tablet-start-2{grid-column-start:2}.gp--col-tablet-end-3{grid-column-end:3}.gp--col-tablet-start-3{grid-column-start:3}.gp--col-tablet-end-4{grid-column-end:4}.gp--col-tablet-start-4{grid-column-start:4}.gp--col-tablet-end-5{grid-column-end:5}.gp--col-tablet-start-5{grid-column-start:5}.gp--col-tablet-end-6{grid-column-end:6}.gp--col-tablet-start-6{grid-column-start:6}.gp--col-tablet-end-7{grid-column-end:7}.gp--col-tablet-start-7{grid-column-start:7}.gp--col-tablet-end-8{grid-column-end:8}.gp--col-tablet-start-8{grid-column-start:8}.gp--col-tablet-end-9{grid-column-end:9}.gp--col-tablet-start-9{grid-column-start:9}.gp--col-tablet-end-10{grid-column-end:10}.gp--col-tablet-start-10{grid-column-start:10}.gp--col-tablet-end-11{grid-column-end:11}.gp--col-tablet-start-11{grid-column-start:11}.gp--col-tablet-end-12{grid-column-end:12}.gp--col-tablet-start-12{grid-column-start:12}.gp--col-tablet-end-13{grid-column-end:13}.gp--row-tablet-start-1{grid-row-start:1}.gp--row-tablet-end-2{grid-row-end:2}.gp--row-tablet-start-2{grid-row-start:2}.gp--row-tablet-end-3{grid-row-end:3}.gp--row-tablet-start-3{grid-row-start:3}.gp--row-tablet-end-4{grid-row-end:4}.gp--row-tablet-start-4{grid-row-start:4}.gp--row-tablet-end-5{grid-row-end:5}.gp--row-tablet-start-5{grid-row-start:5}.gp--row-tablet-end-6{grid-row-end:6}.gp--row-tablet-start-6{grid-row-start:6}.gp--row-tablet-end-7{grid-row-end:7}.gp--row-tablet-start-7{grid-row-start:7}.gp--row-tablet-end-8{grid-row-end:8}}@media (max-width:599px){.gp--col-mobil-start-1{grid-column-start:1}.gp--col-mobil-end-2{grid-column-end:2}.gp--col-mobil-start-2{grid-column-start:2}.gp--col-mobil-end-3{grid-column-end:3}.gp--col-mobil-start-3{grid-column-start:3}.gp--col-mobil-end-4{grid-column-end:4}.gp--col-mobil-start-4{grid-column-start:4}.gp--col-mobil-end-5{grid-column-end:5}.gp--col-mobil-start-5{grid-column-start:5}.gp--col-mobil-end-6{grid-column-end:6}.gp--col-mobil-start-6{grid-column-start:6}.gp--col-mobil-end-7{grid-column-end:7}.gp--col-mobil-start-7{grid-column-start:7}.gp--col-mobil-end-8{grid-column-end:8}.gp--col-mobil-start-8{grid-column-start:8}.gp--col-mobil-end-9{grid-column-end:9}.gp--col-mobil-start-9{grid-column-start:9}.gp--col-mobil-end-10{grid-column-end:10}.gp--col-mobil-start-10{grid-column-start:10}.gp--col-mobil-end-11{grid-column-end:11}.gp--col-mobil-start-11{grid-column-start:11}.gp--col-mobil-end-12{grid-column-end:12}.gp--col-mobil-start-12{grid-column-start:12}.gp--col-mobil-end-13{grid-column-end:13}.gp--row-mobil-start-1{grid-row-start:1}.gp--row-mobil-end-2{grid-row-end:2}.gp--row-mobil-start-2{grid-row-start:2}.gp--row-mobil-end-3{grid-row-end:3}.gp--row-mobil-start-3{grid-row-start:3}.gp--row-mobil-end-4{grid-row-end:4}.gp--row-mobil-start-4{grid-row-start:4}.gp--row-mobil-end-5{grid-row-end:5}.gp--row-mobil-start-5{grid-row-start:5}.gp--row-mobil-end-6{grid-row-end:6}.gp--row-mobil-start-6{grid-row-start:6}.gp--row-mobil-end-7{grid-row-end:7}.gp--row-mobil-start-7{grid-row-start:7}.gp--row-mobil-end-8{grid-row-end:8}}@media (min-width:900px){.grid-placement-content.-va-desktop-center{display:flex;align-items:center}.grid-placement-content.-va-desktop-bottom{display:flex;align-items:flex-end}}@media (max-width:900px){.grid-placement-content.-va-tablet-center{display:flex;align-items:center}.grid-placement-content.-va-tablet-bottom{display:flex;align-items:flex-end}}@media (max-width:599px){.grid-placement-content.-va-mobile-center{display:flex;align-items:center}.grid-placement-content.-va-mobile-bottom{display:flex;align-items:flex-end}}.grid-placement-fragments{width:100%}.content-grid-placement-wrapper{display:flex;min-height:100%;width:100%}.gp--grid-container{min-height:100%;width:100%;display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));grid-template-rows:repeat(var(--grid-rows),minmax(0,auto))}
3 3 
\ No newline at end of file
public/css/grid-placement-wrapper.scss
History View file @76e6ab7
... ... 
@@ -103,6 +103,10 @@ $grid-rows: 7;
103 103 
   }
104 104 
 }
105 105
106 
+.grid-placement-fragments {
107 
+  width: 100%;
108 
+}
109 
+
106 110
107 111 
 // Anpassen des Containers
108 112 
 .content-grid-placement-wrapper {