Szablon:Nux/flexi-float-gallery/style.css: Różnice pomiędzy wersjami

Z Wikipedii, wolnej encyklopedii
[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 */
    }
}