Home Forums Art WordPress Theme group fluid height not working on desktop

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #21070
    Miguel
    Participant
    Purchased
    Supported

    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,

    #21071
    Miguel
    Participant
    Purchased
    Supported
    This reply has been marked as private.
    #21075
    SeaTheme
    Keymaster
    Purchased

    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.
    module width

    Regards!

    SeaTheme – SeaTheme.netTwitterFacebook

    #21077
    Miguel
    Participant
    Purchased
    Supported

    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…

    #21089
    SeaTheme
    Keymaster
    Purchased

    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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!