Benutzer: Jonar/common.css: Unterschied zwischen den Versionen
Aus Smart Places Network
Jonar (Diskussion | Beiträge) (Die Seite wurde geleert.) |
Jonar (Diskussion | Beiträge) |
||
Zeile 1: | Zeile 1: | ||
+ | /* Style group of images inside pages generated by the form Produktmusterkoffer */ | ||
+ | #product-gallery { | ||
+ | background: red; | ||
+ | display: flex; | ||
+ | flex-direction: row; | ||
+ | flex-wrap: wrap; | ||
+ | } | ||
+ | #product-gallery > .element-container { | ||
+ | background-color: blue; | ||
+ | margin: 20px; | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | justify-items: space-between; | ||
+ | align-items: center; | ||
+ | } | ||
+ | /* | ||
+ | #product-gallery > .element-container > p > .image { | ||
+ | border: 1px solid #c8ccd1; | ||
+ | background-color: #f8f9fa; | ||
+ | width: 155px; | ||
+ | height: 155px; | ||
+ | margin: 5px; | ||
+ | padding: 14px; | ||
+ | box-sizing: border-box; | ||
+ | text-align: center; | ||
+ | } | ||
+ | #product-gallery .image { | ||
+ | position: relative; | ||
+ | } | ||
+ | #product-gallery .image::after { | ||
+ | content: attr(title); | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | top: 155px; | ||
+ | width: 155px; | ||
+ | color: #747e8b; | ||
+ | overflow-wrap: break-word; | ||
+ | z-index: 1; | ||
+ | } */ |
Version vom 11. Februar 2019, 13:01 Uhr
/* Style group of images inside pages generated by the form Produktmusterkoffer */ #product-gallery { background: red; display: flex; flex-direction: row; flex-wrap: wrap; } #product-gallery > .element-container { background-color: blue; margin: 20px; display: flex; flex-direction: column; justify-items: space-between; align-items: center; } /* #product-gallery > .element-container > p > .image { border: 1px solid #c8ccd1; background-color: #f8f9fa; width: 155px; height: 155px; margin: 5px; padding: 14px; box-sizing: border-box; text-align: center; } #product-gallery .image { position: relative; } #product-gallery .image::after { content: attr(title); position: absolute; left: 0; top: 155px; width: 155px; color: #747e8b; overflow-wrap: break-word; z-index: 1; } */