/** * Cleaner Gallery Stylesheet * @version 20150615 */ .gallery { max-width: 100%; display: block; clear: both; margin: 0 auto 20px; } .gallery::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .gallery-item { width: 100%; padding: 0; text-align: center; list-style: none; border: none; background: transparent; box-sizing: border-box; } .gallery-icon {} .gallery-icon img { width: auto; max-width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; } .gallery-type-circle img { border-radius: 50%; } .gallery-caption { margin: 5px 0 0; box-sizing: border-box; } /* When the screen width is at least 480px. */ @media only screen and ( min-width: 480px ) { .gallery-item { float: left; margin: 0 5% 5px 0; } .rtl .gallery-item { float: right; margin-left: 5%; margin-right: 0; } /* Everything should be 2 columns. */ .gallery-col-2 .gallery-item, .gallery-col-3 .gallery-item, .gallery-col-4 .gallery-item, .gallery-col-5 .gallery-item, .gallery-col-6 .gallery-item, .gallery-col-7 .gallery-item, .gallery-col-8 .gallery-item, .gallery-col-9 .gallery-item, .gallery-col-10 .gallery-item { width: 45%; } } /* When the screen width is between 480px and 539px. */ @media only screen and ( min-width: 480px ) and ( max-width: 539px ) { .gallery-item:nth-of-type( 2n + 1 ) { clear: both; } .gallery-item:nth-child( 2n ) { margin-right: 0; float: right; } .rtl .gallery-item:nth-child( 2n ) { margin-left: 0; float: left; } } /* When the screen width is between 540px and 639px. */ @media only screen and ( min-width: 540px ) and ( max-width: 639px ) { .gallery-col-3 .gallery-item:nth-child( 3n + 1 ), .gallery-col-4 .gallery-item:nth-child( 3n + 1 ), .gallery-col-5 .gallery-item:nth-child( 3n + 1 ), .gallery-col-6 .gallery-item:nth-child( 3n + 1 ), .gallery-col-7 .gallery-item:nth-child( 3n + 1 ), .gallery-col-8 .gallery-item:nth-child( 3n + 1 ), .gallery-col-9 .gallery-item:nth-child( 3n + 1 ), .gallery-col-10 .gallery-item:nth-child( 3n + 1 ) { clear: both; } .gallery-col-3 .gallery-item:nth-child( 3n ), .gallery-col-4 .gallery-item:nth-child( 3n ), .gallery-col-5 .gallery-item:nth-child( 3n ), .gallery-col-6 .gallery-item:nth-child( 3n ), .gallery-col-7 .gallery-item:nth-child( 3n ), .gallery-col-8 .gallery-item:nth-child( 3n ), .gallery-col-9 .gallery-item:nth-child( 3n ), .gallery-col-10 .gallery-item:nth-child( 3n ) { float: right; margin-left: 0; margin-right: 0; } .rtl .gallery-col-3 .gallery-item:nth-child( 3n ), .rtl .gallery-col-4 .gallery-item:nth-child( 3n ), .rtl .gallery-col-5 .gallery-item:nth-child( 3n ), .rtl .gallery-col-6 .gallery-item:nth-child( 3n ), .rtl .gallery-col-7 .gallery-item:nth-child( 3n ), .rtl .gallery-col-8 .gallery-item:nth-child( 3n ), .rtl .gallery-col-9 .gallery-item:nth-child( 3n ), .rtl .gallery-col-10 .gallery-item:nth-child( 3n ) { float: left; } /* Handle the columns. */ .gallery-col-3 .gallery-item, .gallery-col-4 .gallery-item, .gallery-col-5 .gallery-item, .gallery-col-6 .gallery-item, .gallery-col-7 .gallery-item, .gallery-col-8 .gallery-item, .gallery-col-9 .gallery-item, .gallery-col-10 .gallery-item { width: 30%; } } /* When the screen width is between 640px and 767px. */ @media only screen and ( min-width: 640px ) and ( max-width: 767px ) { .gallery-col-2 .gallery-item:nth-child( 2n + 1 ), .gallery-col-3 .gallery-item:nth-child( 3n + 1 ), .gallery-col-4 .gallery-item:nth-child( 4n + 1 ), .gallery-col-5 .gallery-item:nth-child( 4n + 1 ), .gallery-col-6 .gallery-item:nth-child( 4n + 1 ), .gallery-col-7 .gallery-item:nth-child( 4n + 1 ), .gallery-col-8 .gallery-item:nth-child( 4n + 1 ), .gallery-col-9 .gallery-item:nth-child( 4n + 1 ), .gallery-col-10 .gallery-item:nth-child( 4n + 1 ) { clear: both; } .gallery-col-2 .gallery-item:nth-child( 2n ), .gallery-col-3 .gallery-item:nth-child( 3n ), .gallery-col-4 .gallery-item:nth-child( 4n ), .gallery-col-5 .gallery-item:nth-child( 4n ), .gallery-col-6 .gallery-item:nth-child( 4n ), .gallery-col-7 .gallery-item:nth-child( 4n ), .gallery-col-8 .gallery-item:nth-child( 4n ), .gallery-col-9 .gallery-item:nth-child( 4n ), .gallery-col-10 .gallery-item:nth-child( 4n ) { float: right; margin-left: 0; margin-right: 0; } .rtl .gallery-col-2 .gallery-item:nth-child( 2n ), .rtl .gallery-col-3 .gallery-item:nth-child( 3n ), .rtl .gallery-col-4 .gallery-item:nth-child( 4n ), .rtl .gallery-col-5 .gallery-item:nth-child( 4n ), .rtl .gallery-col-6 .gallery-item:nth-child( 4n ), .rtl .gallery-col-7 .gallery-item:nth-child( 4n ), .rtl .gallery-col-8 .gallery-item:nth-child( 4n ), .rtl .gallery-col-9 .gallery-item:nth-child( 4n ), .rtl .gallery-col-10 .gallery-item:nth-child( 4n ) { float: left; } /* Handle the columns. */ .gallery-col-2 .gallery-item { width: 45%; } .gallery-col-3 .gallery-item { width: 30%; } .gallery-col-4 .gallery-item, .gallery-col-5 .gallery-item, .gallery-col-6 .gallery-item, .gallery-col-7 .gallery-item, .gallery-col-8 .gallery-item, .gallery-col-9 .gallery-item, .gallery-col-10 .gallery-item { width: 21.25%; } } /* When the screen width is at least 768px. */ @media only screen and ( min-width: 768px ) { .gallery-col-2 .gallery-item:nth-child( 2n + 1 ), .gallery-col-3 .gallery-item:nth-child( 3n + 1 ), .gallery-col-4 .gallery-item:nth-child( 4n + 1 ), .gallery-col-5 .gallery-item:nth-child( 5n + 1 ), .gallery-col-6 .gallery-item:nth-child( 6n + 1 ), .gallery-col-7 .gallery-item:nth-child( 7n + 1 ), .gallery-col-8 .gallery-item:nth-child( 8n + 1 ), .gallery-col-9 .gallery-item:nth-child( 9n + 1 ), .gallery-col-10 .gallery-item:nth-child( 10n + 1 ) { clear: both; } .gallery-col-2 .gallery-item:nth-child( 2n ), .gallery-col-3 .gallery-item:nth-child( 3n ), .gallery-col-4 .gallery-item:nth-child( 4n ), .gallery-col-5 .gallery-item:nth-child( 5n ), .gallery-col-6 .gallery-item:nth-child( 6n ), .gallery-col-7 .gallery-item:nth-child( 7n ), .gallery-col-8 .gallery-item:nth-child( 8n ), .gallery-col-9 .gallery-item:nth-child( 9n ), .gallery-col-10 .gallery-item:nth-child( 10n ) { margin-left: 0; margin-right: 0; } /* Handle the columns. */ .gallery-col-2 .gallery-item { width: 45%; } .gallery-col-3 .gallery-item { width: 30%; } .gallery-col-4 .gallery-item { width: 21.25%; } .gallery-col-5 .gallery-item { width: 16%; } .gallery-col-6 .gallery-item { width: 12.5%; } .gallery-col-7 .gallery-item { width: 10%; } .gallery-col-8 .gallery-item { width: 8.125%; } .gallery-col-9 .gallery-item { width: 6.66%; } .gallery-col-10 .gallery-item { width: 5.5%; } }