group fluid height not working on desktop

[Miguel]

Hi,

I want to display in Art Theme the BM Content Builder groups (single image + text) with fluid heigh i.e. 80% of screen height, but it seems not work in desktop version, only in mobile.

Could you take a look to my site home page?

Thanks in advance,

[Miguel]

This reply has been marked as private.

[SeaTheme]

Hi,

Because the images are too big. If the height of the module is more than 80% of the screen height, the group would be based on modules height.

Please decrease the Single Image module width, the height will be decreased automatic.
I have decreased the 2 images.

Width: To increase/reduce the width. Each module could be set 1-12 cols width. When the module is 12 cols already, increase one column, the module would be fullwidth.

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[Miguel]

This is very tricky.
I see fluid height in a group is not working like in the slider, for desktop (Mobile version works fine).
Group considers the width of the screen and not the height.

Hence, images will display very different depending on the size / ratio of the screen.
(ie: Tablet 768×1024, HD 1920×1080, iMac 2560×1440).

I can’t find a module columns width that will display “ok” in all resolutions.

I will need to find a solution so that images display good in every screen…

[SeaTheme]

Hi,

It is hard to control the fluid height by the CSS.

There is anther solution for this kind of layout indead of column width, the custom CSS will limit the image height, the image and text(250px) will be in the same screen :

@media(min-width:768px) { 
 .home .single-image-img { 
    max-height: calc(80vh - 250px); 
    object-fit: contain;
 }
}

PS: paste the custom CSS in custom.css or “Appearance > Customize: Additional CSS”.

Best

[Author]

Posts