-
AuthorPosts
-
May 13, 2022 at 4:24 pm #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:
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.
May 13, 2022 at 4:25 pm #1351678This reply has been marked as private.May 13, 2022 at 8:01 pm #1351707This reply has been marked as private.May 13, 2022 at 8:27 pm #1351708This reply has been marked as private.May 15, 2022 at 10:36 pm #1351880Hi,
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,
MikeMay 16, 2022 at 12:08 pm #1351923This reply has been marked as private.May 16, 2022 at 1:09 pm #1351945Hi,
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,
MikeMay 16, 2022 at 1:41 pm #1351955This reply has been marked as private.May 16, 2022 at 6:56 pm #1351982Hi,
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,
MikeMay 17, 2022 at 1:57 pm #1352077This reply has been marked as private.May 17, 2022 at 5:34 pm #1352102Hi,
Glad to hear that you have this sorted out, shall we close this then?Best regards,
MikeMay 17, 2022 at 5:45 pm #1352108This reply has been marked as private.May 17, 2022 at 6:17 pm #1352118May 17, 2022 at 6:23 pm #1352121This reply has been marked as private.May 17, 2022 at 7:31 pm #1352123Hi,
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 -
AuthorPosts
- The topic ‘Settung a minimum height for an embed using the Hype Animations Plugin’ is closed to new replies.