Images Carousel data items height

[jelino]

Hello,

The images carousel has options such as carousel size and custom width but they do not work. The size is always maximum, regardless what options you enter, which results on portrait format that the heigth of the picture is always bigger than the PC screen. If I enter  a custom width like 360, this shows up:

<div class=”kleo-carousel-items” data-pager=”.kleo-carousel-features-pager” data-min-items=”1″ data-max-items=”1″ data-autoplay=”yes” data-speed=”3000″ data-scroll-fx=”scroll” data-items-height=”variable” data-items-width=”360″>

But is then overriden by:

<div class=”caroufredsel_wrapper” style=”display: block; text-align: center; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 894px; height: 1482px; margin: 0px; overflow: hidden;”>

I want the pictures in carousel to be not taller than the available screen height. Can you help?

Thanks very much

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-16-57-17-576×1024.jpg&#8221; rel=”modalPhoto[rel-20043361]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-16-57-17-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 16 57 17″ title=”Photo 27.10.18, 16 57 17″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-16-58-49.jpg&#8221; rel=”modalPhoto[rel-1761927071]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-16-58-49-360×462.jpg&#8221; width=”360″ height=”462″ alt=”Photo 27.10.18, 16 58 49″ title=”Photo 27.10.18, 16 58 49″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-17-06-58.jpg&#8221; rel=”modalPhoto[rel-135811546]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-17-06-58-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 17 06 58″ title=”Photo 27.10.18, 17 06 58″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-17-07-09.jpg&#8221; rel=”modalPhoto[rel-2068095435]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-17-07-09-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 17 07 09″ title=”Photo 27.10.18, 17 07 09″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-17-07-12.jpg&#8221; rel=”modalPhoto[rel-2138175607]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-17-07-12-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 17 07 12″ title=”Photo 27.10.18, 17 07 12″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-17-07-24-1.jpg&#8221; rel=”modalPhoto[rel-1411685165]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-17-07-24-1-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 17 07 24 (1)” title=”Photo 27.10.18, 17 07 24 (1)”></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-17-07-24.jpg&#8221; rel=”modalPhoto[rel-2058847381]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-17-07-24-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 17 07 24″ title=”Photo 27.10.18, 17 07 24″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-17-07-29.jpg&#8221; rel=”modalPhoto[rel-898040326]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-17-07-29-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 17 07 29″ title=”Photo 27.10.18, 17 07 29″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-17-07-30.jpg&#8221; rel=”modalPhoto[rel-1607981510]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-17-07-30-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 17 07 30″ title=”Photo 27.10.18, 17 07 30″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-13-57-06.jpg&#8221; rel=”modalPhoto[rel-994906113]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-13-57-06-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 13 57 06″ title=”Photo 27.10.18, 13 57 06″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-14-01-23.jpg&#8221; rel=”modalPhoto[rel-1313223044]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-14-01-23-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 14 01 23″ title=”Photo 27.10.18, 14 01 23″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-14-08-56.jpg&#8221; rel=”modalPhoto[rel-179161455]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-14-08-56-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 14 08 56″ title=”Photo 27.10.18, 14 08 56″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-14-33-30.jpg&#8221; rel=”modalPhoto[rel-1087723764]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-14-33-30-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 14 33 30″ title=”Photo 27.10.18, 14 33 30″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-14-34-27.jpg&#8221; rel=”modalPhoto[rel-1529414864]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-14-34-27-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 14 34 27″ title=”Photo 27.10.18, 14 34 27″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-14-35-16.jpg&#8221; rel=”modalPhoto[rel-963286123]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-14-35-16-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 14 35 16″ title=”Photo 27.10.18, 14 35 16″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-15-21-14.jpg&#8221; rel=”modalPhoto[rel-1589732820]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-15-21-14-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 15 21 14″ title=”Photo 27.10.18, 15 21 14″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-15-31-03.jpg&#8221; rel=”modalPhoto[rel-566056182]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-15-31-03-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 15 31 03″ title=”Photo 27.10.18, 15 31 03″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-15-41-48.jpg&#8221; rel=”modalPhoto[rel-294702078]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-15-41-48-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 15 41 48″ title=”Photo 27.10.18, 15 41 48″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-15-42-32.jpg&#8221; rel=”modalPhoto[rel-462906029]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-15-42-32-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 15 42 32″ title=”Photo 27.10.18, 15 42 32″></a><a href=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-16-01-08.jpg&#8221; rel=”modalPhoto[rel-1908361401]” style=”width: 894px;”>

<img class=”” src=”https://share-inspire.org/wordpress/wp-content/uploads/2018/10/Photo-27.10.18-16-01-08-360×597.jpg&#8221; width=”360″ height=”597″ alt=”Photo 27.10.18, 16 01 08″ title=”Photo 27.10.18, 16 01 08″></a></div></div>

</div>

[Laura]

Hello, please share a direct link to the carousel and then the sizes you want so I can create a css code for you 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[jelino]

Hello Laura,
Here is the link to the page with the carousels: https://share-inspire.org/activities/ the problem is only with the portrait formatted carousels on PC screens (on smartphones it’s ok). I basically want that the pictures heigth does not exceed the available screen heigth. On a typical PC screen this would be equal or less to 640px. A good generic value would be 480px.
Please let me know if you need more information.
Thank you very much for your help, I apreciate it!

[Laura]

Hello, try by adding this to style.css of child theme

COPY CODE

.caroufredsel_wrapper {
    height: 480px !important;
}

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[jelino]

Hello Laura,
thanks very much for your reply. The CSS code you suggest does reduce the carousel height but the picture inside is still very large, overriden by element.style:

Notice also that the img width and heigth settings are ignored, wether they are set to thumbnail, medium or large.
Do you have any other suggestions?
Thank you very much for your help 🙂
Best regards

[Laura]

Hello, try this 🙂

COPY CODE

.kleo-gallery.kleo-single-image .kleo-carousel a {
    margin: 0;
    width: 200px !important;
    height: 200px !important;
}

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[jelino]

Hello Laura,
thanks very much, this did the trick and I get reasonable chunk of portrait pictures on the screen!
The final css looks like that:

@media screen and (min-width:768px) {
.kleo-gallery.kleo-single-image.portrait-format .kleo-carousel a {
margin: 0;
height: 580px !important;
}
}

Thanks again for your fast and efficient help, I appreciate very much 🙂
Best regards

[Laura]

Happy to help!
If you can rate us 5 stars at themeforest that would help a lot 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts