Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1351677

    Here’s how to do that: You can set a CSS class on a specific Hype element by filling in a CSS class on the input form:

    Hype Animation Plugin

    Next, go to your theme CSS, and insert:
    .minheight400 { min-height:400px; }
    This will apply the class to your Hype animation, and your Hype element will be a child element of that.

    Unfortunately this does not work in enfold. When moving the iPd from landscape to portrait view, the embedded Hype animation does not scale to fit. I tested it with other themes and it worked there.

    #1351678
    This reply has been marked as private.
    #1351707
    This reply has been marked as private.
    #1351708
    This reply has been marked as private.
    #1351880

    Hi,
    Thanks for your patience, but I have not heard of this plugin Tumult Hype Animations and I don’t understand what it is, but I see an image on the page that you linked to and it is 600px high on all devices, I don’t have an iPad but in Chrome dev tools iPad emulator the image is full height in landscape and portrait.
    Please include some screenshots so we will better understand what you are trying to achieve, also try placing the image on the page without it in the third-party slider plugin “slide anything” perhaps this element is causing a conflict.

    Best regards,
    Mike

    #1351923
    This reply has been marked as private.
    #1351945

    Hi,
    Thanks for the feedback, so originally your question seemed to be about the minimum height and you pointed to this class and css:
    .minheight400 { min-height:400px; }
    but from your screenshots I believe that you are referring to the container width and how the text is off the screen, is this correct?
    If so then you would want to set the max-width instead.
    I tested this css:

    #raumschematadeslongitudinalbausdiebasilika2_hype_container-2,
    #raumschematadeslongitudinalbausdiebasilika2_hype_container-2 > .HYPE_scene {
    	max-width: 90vw !important;
    	width: 90vw !important;
    }

    but found this will not work because the inner elements such as:
    HYPE_element_container
    HYPE_element

    that create the image on one side and the text on the other have position: absolute; with a transform so they are independent of the outer container. This is why in your slider container the text shows on the second slide.
    I believe your best option will be to create a second version of this element with the text below the image for tablets and show it on tablet sizes while hiding the desktop version on tablet, then hide the tablet version on desktop.

    Best regards,
    Mike

    #1351955
    This reply has been marked as private.
    #1351982

    Hi,
    Thanks for the link, the post author was having issues with the height, you are having problems with the width so this solution doesn’t apply to you.
    When you build the Hype element are you able to use position: relevant; for the inner containers? Or are you able to set brake points so the right hand text will be under the image?

    Best regards,
    Mike

    #1352077
    This reply has been marked as private.
    #1352102

    Hi,
    Glad to hear that you have this sorted out, shall we close this then?

    Best regards,
    Mike

    #1352108
    This reply has been marked as private.
    #1352118

    Hi,
    I believe you are referring to this setting, if so then no, there would not be a way to toggle this based on screen size.
    2022-05-17_001.jpg
    If this is not the setting you mean please include a screenshot of it, thanks.

    Best regards,
    Mike

    #1352121
    This reply has been marked as private.
    #1352123

    Hi,
    Sorry, we were not able to help very well with this issue, but if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Settung a minimum height for an embed using the Hype Animations Plugin’ is closed to new replies.