Szablon:Nux/flexi-float-gallery/style.css: Różnice pomiędzy wersjami
Wygląd
[wersja przejrzana] | [wersja przejrzana] |
Usunięta treść Dodana treść
deczko mniejsze |
W wersji mobilnej dwa obrazki obok siebie będą miały stałą wysokość |
||
Linia 32: | Linia 32: | ||
max-width: none; |
max-width: none; |
||
gap: 10px; |
gap: 10px; |
||
justify-content: center; |
|||
} |
|||
.flexi-float-gallery img { |
|||
width: auto; |
|||
height: 120px !important; /* wartość z sufitu, zawsze można uzależnić od vh lub vw */ |
|||
object-fit: cover; /* jeśli obrazek trzeba powiększyć do wys. 120px, nie rozciągaj go, ale wypełnij */ |
|||
} |
|||
} |
} |
Aktualna wersja na dzień 20:18, 14 sie 2021
/**
Flexi-float gallery.
Pionowa na szerokim, pozioma na wąskim.
Raczej małe (2-3 fotki).
Grafiki powinny być przeskalowane odpowiednio (lepsze dla telefonów).
*/
.flexi-float-gallery {
display: flex;
flex-direction: column;
float: right;
max-width: 120px;
}
.flexi-float-gallery img {
max-width: 100%;
height: auto;
}
.flexi-float-gallery .thumbinner {
max-width: 100%;
width: auto !important;
}
.flexi-float-gallery div.tright {
margin: 0;
margin-bottom: .5em;
}
/* ~smartphone */
@media (max-width: 719px) {
.flexi-float-gallery {
flex-direction: row;
float: none;
max-width: none;
gap: 10px;
justify-content: center;
}
.flexi-float-gallery img {
width: auto;
height: 120px !important; /* wartość z sufitu, zawsze można uzależnić od vh lub vw */
object-fit: cover; /* jeśli obrazek trzeba powiększyć do wys. 120px, nie rozciągaj go, ale wypełnij */
}
}