Forcing all article gallery images to resize to a max height

goldqa

Please, can you direct me on solving the following problems, both about the height of the images?

PROBLEM 1:
In the first attached image file, you can see that if/when we don't make the images same height, the article below them do not start at the same place. This does not seem to look right.

PROBLEM 2:
When I use the Gallery feature with several image that are of different heights, when the article opens and the images automatically change, the article "seems" to be jumping up and down.

I think both of these can be solved at runtime by forcing all images to resize to a max height. Can you please direct to how and where I should make this css adjustment?

I really appreciate your ongoing support. Thanks.

Ninja

goldqa
Hi
Logically it works like this as you have more height it will push the content down.
Add this code in custom.css file in the template to set max height

.ja-news .news-medium .item-image img {
    max-height: 400px;
}

For gallery view use this code

.ja-media-content .ja-gallery-list-wrap .item-image {
    max-height: 500px;
}

In case it does not work , i need the Page URL on which i can see both issues.

Regards

goldqa

Hello Pankaj,

Thanks you for the response.

This is what I did, as I needed to accommodate the in-article gallery carousel. Please let me know if I should clarify the logic:
.carousel-inner .item .item-image {
max-height: 23.5em; }

.carousel-inner .item .item-image img {
max-height: 100%;
max-width: 100%;
min-height: 23.5em;}

.blog .item .item-image {
height: 12em;}

.blog .item .item-image img {
max-height: 100%;
max-width: 100%;}

I seem to work for me. Please let me know if there is anything there that does not make sense or may easily break...😉...

I appreciate your help.

Ninja

goldqa
Hi
Do not set fixed height as it will make issue in small screen

.blog .item .item-image {
height: 12em;}

Set as min or max height only.

Regards

goldqa

Thank you...

So instead of:

.blog .item .item-image {height: 12em;}

...should I do this:
.blog .item .item-image {max-height: 12em;}

...or:
.blog .item .item-image {min-height: 12em;}

...or:
.blog .item .item-image {min-height: 12em;}
.blog .item .item-image {max-height: 12em;}

Thanks.

Ninja

goldqa
Please post the URL and share screenshot how you want, A max height means this maximum height of image will same, vice versa for minimum and only height value means this will be set for all screen size.

goldqa

Ninja

Hello and thanks. I have been disconnected for a while, now back... I will experiment and if need more help, I will share screenshots. Or maybe the site itself, even if not perfect...

Thank you.

Ninja

goldqa
Hi
No problem. if its same topic this thread is open and you can post here.
For new topic do not hesitate to open a new thread with topic subject .

Regards

goldqa

Thanks. All seems to work fine with the adjustment you offered. I appreciate your helpful advice.

Ninja

goldqa
You are welcome.
If you have any questions in future feel free to open a thread on forum.

Regards