Image height in bootstrap
-
I have tried to look for info how to make all the images the same size height-wise, but can’t find any.
I have cropped the images to be about the same size but when they show in the bootstrap they vary in height… How can I make them all the same height (whatever I’d want it to be)?
-
.. the saga continues..
I looked and found and tried some custom css and it works
.carousel {
max-height: 392px;
overflow: hidden;.item img {
width: 100%;
height: auto;
}EXCEPT that the title, description nor the button are on the image anymore.. nothing..
please send me your website link.
http://www.elainsuojelulaki.fi/
So the photos are now of a certain height, but by “force” and therefore not looking the best possible – the bottom of the photos are cut out.
I am having the same issue and I am new to using this theme. I would like to have all the photos the same size with title and clickable link like the sample. If anyone has a working solution, please let me know. I have updated the wordpress to 4.2 and the theme today and still I have the same issue.
Thanks for any help!
Hi There,
Thanks for writing in!
For achieving the same height images you may add this code into your CSS which is given below:
.carousel { max-height: 484px; overflow: hidden; }Hope this helps,
Thanks!Close but no cigar 🙂
The images are now “full”, which is good, but when you slide from one slide to the next, e size “jumps” (to adjust). Still no title nor description showing.
Hi There!
To fix the auto adjusting of images you may use this code below:
.carousel { min-height: 484px; overflow: hidden; }Secondly, let us know a bit more about the requirement of yours related to title and description that what exactly you want us to execute.
Thanks!
Nope, as I said, the code won’t work.
It does show the photos okay (not cutting the bottom off) but the images are not the same height.As for title and description I have written a short title and description for each photo
(e.g for the horse photo the title it “Lain rakenne ja lähtökohdat” and the description is “Lainsäädännön tulee pyrkiä edistämään eläinten hyvinvointia.”
And the button (which isn’t showing either has this code: Lue lisääHi There,
Your images sizes are not same as we know you can check links below as these are different in sizes.
http://prntscr.com/6z3xu1
http://prntscr.com/6z3xg3and secondly to activate your titles and descriptions and else please add described code into your CSS.
#bootstrap-slider .carousel-caption { display: block; }hope this helps,
Thanks!I got it to work finally – thanks!
I know the images were of different sizes but I thought the carousel would compress them or something.. but now it works 🙂You’re welcome! 🙂
Hello,
First I would like to say this is a great theme!
I have been having a similar problem with the bottom of the images jumping up when they slide left which makes reading copy below difficult. I am current on WordPress updates and the Evolve version is 3.3.0 Coding is new to me but I was able to add the above mentioned lines into the CSS.carousel {
min-height: 484px;
overflow: hidden;
}
It didn’t rectify the problem. My images are all 1200 x 450, I have also tried 1200 x 400 and 1200 x 488 all with negative results.Here is the site, http://www.salusprime.com/
Thank you in advance for your help.
Hi there,
Thanks for writing in,
If you wish to resolve the jumping slides you can add following code under Appearance > Theme Options > Custom CSS:
.carousel { max-height: 450px !important; min-height: 450px; } #bootstrap-slider .carousel-inner .img-responsive { max-height: 450px !important; min-height: 450px; } .menu-back .container:first-child { display: none; }Hope this helps!
Thanks.
That worked great! Thank you for responding so quickly!
You’re welcome! 🙂
The topic ‘Image height in bootstrap’ is closed to new replies.
