carousel height change

[renelabounek]

How can I edit the carousel height?

I have found there is .carousel-inner item in the file vendor/bootstrap/css/bootstrap.min.css

When I have tried to add there parameter like: max-height: 200px, nothing happened.

The whole template is really really cool, but the carousel is too big...

Thanks for an advice, Rene

[zeufparis]

Hi R. First you get the right CSS file, here /vendor/bootstrap/css/bootstrap.min.css Then you look for the class carousel-inner And there, you change the height (max-height: 200px; works just fine)

Hope it will help. Take care

[renelabounek]

Hi zeufparis, many thanks for help. The carousel really decreased its size. But the content inside now does not fit the carousel dimension, nor image, nor the text (i.e. First slide; This is a description for the first slide.), etc.

I have chagned the dimension of the carousel from original 1900x1080 at 1900x540. I have chachged the image URL in index.html from: http://placehold.it/1900x1080 at http://placehold.it/1900x540 But it did not help. The image appears like "zoomed" in the carousel. I believe the text is hidden "bellow" the carousel.

Do I need to change some other parameters in the bootstrap.min.css file, to fit the image and text at the reduced carousel dimensions? In the indext.html code, I can not see any variables defyning image or text positions.

Many thanks, Rene

[zeufparis]

For the caption, you have to change the.carousel-caption bottom.. To 60px or more. You have to try. Regarding the "zoom" effect, I don't see it with my own picture, sorry Good luck

[renelabounek]

Thanks, that again helped. When I have set the bottom at 310px, I have got the text back. But there will be something wrong with the image in the carousel, bacuse 310px is quite high number and suggeste that I miss large portion of the image. Here is a screen how approximatelly my homepage appears now with linked 1900x540px image:

While the original image appears like:

Again, many thanks @zeufparis for the substantial help!

[zeufparis]

Ok, try with a real picture

[renelabounek]

Same behavior with the real image of dimensions 1900x540px. There will be separate scaling for carousel borders and for the image inside.

Webpage:

Original:

[zeufparis]

Did you try to change the height of your picture to 540 ?

[renelabounek]

Yes, the jpg file resolution is 1900x540. If I should change some picture-related parameter in the css file, then I did not do it. But I think we are not so far, because it appears neither of us know what to change or define specifically in the file.

[zeufparis]

Try to add the height in the css lines

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
  /* add your height here */
}

well.. I am not a css "pro"... You have to try and try and try... The solution is in the CSS.. Try to understand how they build it.. Good luck... Templates are made with logic... If you succeed in understanding it, great.. Otherwise use them exactly as they are otherwise you will spend too much time trying to change it.

[renelabounek]

Thanks @zeufparis, this really helped:

.carousel-item.active{display:block;max-height: 540px}

It appears it is working fine now with any other added parameters. I did not need to change anything else in the template. Only the carousel, because it is too large. Default settings make that over 70% of the information displayed at the Home Page is the carousel. An it is not ideal for my application.

Many thanks and best, Rene