Latest release 1.5

[Riccardo Rossini]

I’m very disappointed about the relationship between Kleo theme and rtMedia Gallery, after the latest release of the template the gallery (due to an isotope/masonry gallery) can contains only three colums of images, that’s very ugly if you need to have a wide screen gallery: images appears very little and only in three columns with empty spaces in the right part of the page. I hope the issue will be fixed soon

Attachments:

You must be logged in to view attached files.

[Riccardo Rossini]

In css the problem is linked to this:

-webkit-transform: translate3d(0px, 0px, 0px);

How can I add an another column?

[Riccardo Rossini]

it seems that the problem is linked in shortcodes.css
Please, help me!!

[Abe]

Hi there,
We are working to make the section look better. You can delete the following files from the theme until next minor udpate if you don’t like the look:

– wp-content/themes/kleo/rtmedia/media/media-gallery.php
– wp-content/themes/kleo/rtmedia/media/media-gallery-item.php

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Riccardo Rossini]

Thank you

[Riccardo Rossini]

In the attached image you can see my look now, I deleted in shortcodes.css the following strings:

/* Carousel Gallery With Thumbs */
.kleo-gallery-image {
position: relative;
overflow: hidden;

}
.kleo-gallery-image > div {
opacity: 0;
}
.kleo-gallery-image > div:first-child {
opacity: 1;
}
.kleo-gallery {
position: relative;
overflow: hidden;
}
.kleo-gallery .kleo-carousel a {
float: left;
text-align: center;
position: relative;
margin: 1px;
}
.kleo-gallery .kleo-carousel a img {
min-width: 100%;
}

.kleo-gallery-image div,
.kleo-gallery-image img,
.kleo-thumbs-animated,
.kleo-thumbs-images
.kleo-thumbs-animated img,
.kleo-thumbs-images img {
display: block;
width: 100%;
}
.kleo-thumbs-animated.rounded img,
.kleo-thumbs-images.rounded img {
border-radius: 100%;
}
.kleo-gallery-image span {}
.kleo-thumbs-animated a,
.kleo-thumbs-images a {
display: inline-block;
float: left;
position: relative;
padding: 5px;
}
.kleo-thumbs-animated.rounded .hover-element {}
.kleo-thumbs-animated .hover-element,
.kleo-thumbs-images .hover-element {}
.kleo-thumbs-animated a:hover,
.kleo-thumbs-animated a.selected {}

.kleo-single-image .kleo-thumbs-animated img {
display: inline-block;
}
.kleo-single-image .caroufredsel_wrapper .kleo-carousel {
text-align: center !important;
}
.kleo-single-image .kleo-carousel {
text-align: center;
width: 100% !important;
}
.kleo-single-image .kleo-carousel img {
width: auto !important;
}

.one-thumb a,
.one-thumbs a {
/* If not set this will be default thumb width */
width: 100%;
}
.two-thumbs a {
width: 50%;
}
.three-thumbs a {
width: 33.3333%;
}
.four-thumbs a {
width: 25%;
}
.five-thumbs a {
width: 20%;
}
.six-thumbs a {
width: 16.6667%;
}
.seven-thumbs a {
width: 14.2857%;
}
.eight-thumbs a {
width: 12.5%;
}
.nine-thumbs a {
width: 11.1111%;
}
.ten-thumbs a {
width: 10%;
}
.eleven-thumbs a {
width: 9.0909%;
}
.twelve-thumbs a {
width: 8.3333%;
}

.kleo-thumbs-prev,
.kleo-thumbs-next {
position: absolute;
width: 35px;
height: 75px;
background: rgba(0, 0, 0, 0);
color: #fff;
text-align: center;
font-size: 18px;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.kleo-thumbs-prev {
left: -35px;
top: 50%;
margin-top: -37px;
border-radius: 0 3px 3px 0;
}
.kleo-thumbs-next {
right: -35px;
top: 50%;
margin-top: -37px;
border-radius: 3px 0 0 3px;
}
.kleo-gallery:hover .kleo-thumbs-prev {
left: 0;
color: #fff;
background: rgba(0, 0, 0, 0.1);
}
.kleo-gallery:hover .kleo-thumbs-next {
right: 0;
color: #fff;
background: rgba(0, 0, 0, 0.1);
}
.kleo-gallery .kleo-thumbs-prev:hover,
.kleo-gallery .kleo-thumbs-next:hover {
background: rgba(0, 0, 0, 0.3);
}
.kleo-thumbs-prev i,
.kleo-thumbs-next i {
line-height: 75px;
}

/* Carousel Gallery Grid */
.kleo-gallery-grid {}
.kleo-gallery-grid ul.kleo-isotope {
padding: 0;
list-style: none;
clear: both;
float: left;
margin: 0;
position: relative;
width: 100.4%;
}
.kleo-gallery-grid .kleo-isotope .isotope-item {
display: inline-block;
float: left;
overflow: hidden;
}

.kleo-gallery-grid .kleo-isotope .isotope-item:last-child {}
.kleo-gallery-grid .kleo-isotope .isotope-item img {
width: 100%;
}
.kleo-small-gap.kleo-gallery-grid .kleo-gallery-inner { margin-bottom: 1px;margin-right: 1px; position: relative; }
.kleo-large-gap.kleo-gallery-grid .kleo-gallery-inner { margin-bottom: 10px;margin-right: 10px; position: relative; }
.kleo-small-gap.kleo-gallery-grid {
padding: 1px 0 0 1px;
}
.kleo-large-gap.kleo-gallery-grid {
padding: 10px 0 0 10px;
}

.kleo-masonry-item,
.kleo-isotope > li {float:left;}

.kleo-masonry-item,
.kleo-isotope > li {width:33.3%; }
.template-page.col-sm-12 .kleo-masonry-item,
.template-page.col-sm-12 .kleo-isotope > li {width:24.9%;}
.template-page.col-sm-12 .section-container.container-full .kleo-masonry-item,
.template-page.col-sm-12 .section-container.container-full .kleo-isotope > li {width:16.6%;}

@media (min-width: 1440px) {
.kleo-isotope > .kleo-masonry-item,
.kleo-isotope > li {
width: 33.3%;
}
.template-page.col-sm-12 .kleo-isotope > .kleo-masonry-item,
.template-page.col-sm-12 .kleo-isotope > li {width:24.9%;}
.template-page.col-sm-12 .section-container.container-full .kleo-isotope > .kleo-masonry-item,
.template-page.col-sm-12 .section-container.container-full .kleo-isotope > li {width:16.6%;}
}

@media (min-width: 1200px) and (max-width: 1439px) {
.kleo-isotope > .kleo-masonry-item,
.kleo-isotope > li { width:33.3%; }
.template-page.col-sm-12 .kleo-isotope > .kleo-masonry-item,
.template-page.col-sm-12 .kleo-isotope > li,
.template-page.col-sm-12 .section-container.container-full .kleo-isotope > .kleo-masonry-item,
.template-page.col-sm-12 .section-container.container-full .kleo-isotope > li {width:24.9%;}
}

@media (min-width: 992px) and (max-width: 1199px) {
.kleo-masonry-item,
.kleo-isotope > li,
.template-page.col-sm-12 .kleo-masonry-item,
.template-page.col-sm-12 .kleo-isotope > li,
.template-page.col-sm-12 .section-container.container-full .kleo-isotope > .kleo-masonry-item,
.template-page.col-sm-12 .section-container.container-full .kleo-isotope > li {
width:33.3%;
}
.col-sm-9 .kleo-isotope > li,
.col-sm-9 .kleo-masonry-item,
.col-sm-6 .kleo-isotope > li,
.col-sm-6 .kleo-masonry-item{width:49.9%;}

}

@media (max-width: 991px) {
.kleo-masonry-item,
.kleo-isotope > li,
.template-page.col-sm-12 .kleo-masonry-item,
.template-page.col-sm-12 .kleo-isotope > li,
.template-page.col-sm-12 .section-container.container-full .kleo-isotope > .kleo-masonry-item,
.template-page.col-sm-12 .section-container.container-full .kleo-isotope > li {
width:49.9%
}

}

@media (min-width: 480px) and (max-width: 767px) {

.kleo-masonry-item,
.kleo-isotope > li,
.template-page.col-sm-12 .kleo-masonry-item,
.template-page.col-sm-12 .kleo-isotope > li,
.template-page.col-sm-12 .section-container.container-full .kleo-isotope > .kleo-masonry-item,
.template-page.col-sm-12 .section-container.container-full .kleo-isotope > li {
width: 49.9%;
}

}

@media screen and (max-width: 480px) {

.kleo-masonry-item,
.kleo-isotope > li,
.template-page.col-sm-12 .kleo-masonry-item,
.template-page.col-sm-12 .kleo-isotope > li,
.template-page.col-sm-12 .section-container.container-full .kleo-isotope > .kleo-masonry-item,
.template-page.col-sm-12 .section-container.container-full .kleo-isotope > li {
width:100% !important;
}
}

/* Bootstrap Carousel */
.container-section {}
.container-section {}
.carousel-inner {}
.carousel-inner .item{}
.carousel-caption h3 { color: #fff; }
.carousel-body {}

and create a persona style via CSS (still uncomplete):

/*style gallery*/
@media only screen and (max-width: 481px) {
.rtmedia-container .rtmedia-list .rtmedia-list-item {margin: 0%;}
.rtmedia-container .rtmedia-list .rtmedia-list-item {width:100%; height: 32em;}
.rtmedia-container ul.rtmedia-list li.rtmedia-list-item div.rtmedia-item-thumbnail {
width: 100%;
height: 100%;
line-height: 32em;
}
.rtmedia-container ul.rtmedia-list li.rtmedia-list-item div.rtmedia-item-thumbnail img {
max-width: 100%;
max-height: 100%;
}
}
@media only screen and (min-width: 481px) and (max-width: 1024px) {
.rtmedia-container .rtmedia-list .rtmedia-list-item {margin: 3%;}
.rtmedia-container .rtmedia-list .rtmedia-list-item {width:44%; height:32em;}
.rtmedia-container ul.rtmedia-list li.rtmedia-list-item div.rtmedia-item-thumbnail {
width: 100%;
height: 100%;
line-height: 32em;
}
.rtmedia-container ul.rtmedia-list li.rtmedia-list-item div.rtmedia-item-thumbnail img {
max-width: 100%;
max-height: 100%;
}
}
@media only screen and (min-width: 1024px) {
.rtmedia-container .rtmedia-list .rtmedia-list-item {margin: 1.5%;}
.rtmedia-container .rtmedia-list .rtmedia-list-item {width:22%; height: 32em;}
.rtmedia-moderate .rtmedia-action-buttons {diplay:none;}
.rtmedia-container ul.rtmedia-list li.rtmedia-list-item div.rtmedia-item-thumbnail {
width: 100%;
height: 100%;
line-height: 40em;
}
.rtmedia-container ul.rtmedia-list li.rtmedia-list-item div.rtmedia-item-thumbnail img {
max-width: 100%;
max-height: 100%;
}
}
@media only screen and (device-width: 1366px) {
.rtmedia-container .rtmedia-list .rtmedia-list-item {margin: 1.45%;}
}
@media only screen and (device-width: 1400px) {
.rtmedia-container .rtmedia-list .rtmedia-list-item {margin: 1.45%;}
}
@media only screen and (device-width: 1440px) {
.rtmedia-container .rtmedia-list .rtmedia-list-item {margin: 1.45%;}
}
@media only screen and (device-width: 1600px) {
.rtmedia-container .rtmedia-list .rtmedia-list-item {margin: 1.45%;}
}
@media only screen and (device-width: 2450px) {
.rtmedia-container .rtmedia-list .rtmedia-list-item {margin: 1.45%;}
}
/*style gallery end*/

Attachments:

You must be logged in to view attached files.

[Splendor]

Nice work. Are you using the widgets?

[Riccardo Rossini]

no, widescreen

[Splendor]

Nice

[Author]

Posts