Front Page › D5 Creation Forum › General Support › BUG: Searchlight Theme › Reply To: BUG: Searchlight Theme
I put up a new demo site to show you the issue…
You will see here the images are too large and wrap a column too early. I made changes, but may not be the best, I am an amateur.
You have:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*Gallery Post ----------------------------*/ .gallery { margin: 0 -10px; text-align: center; } .gallery-item { margin: 20px 10px; display: inline-block; vertical-align: top; float: none;} .gallery-item img { border: none !important; padding: 0 !important; width: 100%; } .gallery-caption{ clear:both;display:inline-block;margin:0 auto;padding:5px 1px; position:relative; width:100% } .gallery-columns-1 .gallery-item {width: calc(100% - 20px);} .gallery-columns-2 .gallery-item {width: calc(50% - 20px);} .gallery-columns-3 .gallery-item {width: calc(33.333% - 20px);} .gallery-columns-4 .gallery-item {width: calc(25% - 20px);} .gallery-columns-5 .gallery-item {width: calc(20% - 20px);} .gallery-columns-6 .gallery-item {width: calc(16.666% - 20px);} .gallery-columns-7 .gallery-item {width: calc(14.285% - 20px);} .gallery-columns-8 .gallery-item {width: calc(12.5% - 20px);} .gallery-columns-9 .gallery-item {width: calc(11.111% - 20px);} #content .gallery .attachment-cat-page{margin:0 auto;float:none} |
MY changes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*Gallery Post ----------------------------*/ .gallery { margin: 0 -10px; text-align: center; } .gallery-item { margin: 20px 10px; display: inline-block; vertical-align: top; float: none;} .gallery-item img { border: 0 !important; padding: 0 !important; } .gallery-caption{ clear:both;display:inline-block;margin:0 auto;padding:5px 1px; position:relative; width:100% } .gallery-columns-1 .gallery-item {width: calc(100% - 20px) !important;} .gallery-columns-2 .gallery-item {width: calc(47% - 20px) !important;} .gallery-columns-3 .gallery-item {width: calc(33.33% - 20px) !important;} .gallery-columns-4 .gallery-item {width: calc(25% - 20px) !important;} .gallery-columns-5 .gallery-item {width: calc(20% - 20px) !important;} .gallery-columns-6 .gallery-item {width: calc(16.666% - 20px) !important;} .gallery-columns-7 .gallery-item {width: calc(14.285% - 20px) !important;} .gallery-columns-8 .gallery-item {width: calc(12.5% - 20px) !important;} .gallery-columns-9 .gallery-item {width: calc(11.111% - 20px) !important;} #content .gallery .attachment-cat-page{margin:0 auto;float:none} |