Okay
  Public Ticket #2409649
Flip Box - adjust front and back side
Closed

Comments

  • Colja started the conversation
    May 20, 2020 at 12:49am

    Hello,

    I use an background image on the front side of the flip box and a embedded an video on the back side. Both have got the same size. It should be congruent but it isn't. It seems that there is a padding or margin I cant remove. I have tried adding custom css code to the options panel but this doesnt work for different screen-sizes.
    .nectar-flip-box .flip-box-back {
        padding: 0px 0px !important;
        margin-top: 0 !important;
        margin-bottom: 0px !important;
    }
    .nectar-flip-box .flip-box-back .inner {
        padding: 0 0 !important;
        margin-top: 0px !important;
        margin-bottom: 40px !important;
    }

    .flip-box-front {
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }

    .nectar-flip-box .flip-box-front {
        margin-bottom: 0px;
    }
    .nectar-flip-box .flip-box-front .inner {
        margin-bottom: 30px;
    }

    What should I change or have I remove some padding via css?

    Thanks and regards!
    Manja

  •  8,884
    Tahir replied
    May 20, 2020 at 3:49pm

    Hey Again,

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks

    ThemeNectar Support Team 

  •   Colja replied privately
  •  8,884
    Tahir replied
    May 21, 2020 at 2:08am

    Hey Again,

    Could you provide a screenshot of the issue so i can better understand the padding you are referring to .

    Also had a closer look and the Video you have added only has the mp4 file format therefore it wont work on All Browsers. 

    Furthermore would suggest to rearranged that particular section and use the Self Hosted Video Player Page Element instead of the Fancy Box.  See our Pre-built layout library for available options : http://themenectar.com/docs/salient/salient-studio/ . 

    Thanks 


    ThemeNectar Support Team 

  • Colja replied
    May 21, 2020 at 9:08pm

    Hey Tahir,

    the video elements are great but not for my case - it should be the flip boxes and the back side should contain videos. I use mp4 just due the working process and there will be more formats.

    The goal is to have the front image and the backside video congruent - like playing cards whatever screensize will be. Just the text on the front image should be inner the image.

    So please find my screenshots attached for explanation:
    At the moment I use the margin-bottom-30px-solution for larger screens (Upper screens on the attachment) but it isn't a "clean" solution and it doesn't work on smaller screens. On a larger screen it is ok, but on smaller one the backside is lower then the front. And the text sits below the front image.

    First I thought I have to set margin or padding on 0px, but thats not working (please see screens lower line = margin-0px-solution)? The backside is lower then the front. The text is on the bottom of the front image.

    So what can I do? I hope you can understand the problem - my english is more bad then good :-)

    Thanks
    Manja

  •  8,884
    Tahir replied
    May 21, 2020 at 10:46pm

    Hey Again,

    Could you remove the Custom CSS added so I Can see the issue.  

    Thanks 

    ThemeNectar Support Team 

  •   Colja replied privately
  •  1,079
    ThemeNectar replied
    May 25, 2020 at 7:24pm

    Hey Colja,

    The WP Video element is not designed to automatically change its aspect ratio to fill the parent container. What you're trying to accomplish would be better suited for a javascript solution where the video would be set as a "background" layer element.

    To make this work in your setup with CSS alone would require something like the following:

    .nectar-flip-box .flip-box-back .inner {
 height: 100%;
}
#ajax-content-wrap .nectar-flip-box .mejs-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%!important;
    width: 100%!important;
}
#ajax-content-wrap .nectar-flip-box .mejs-mediaelement {
 overflow: hidden;
}
.nectar-flip-box .wp-video-shortcode video, 
.nectar-flip-box video.wp-video-shortcode {
    width: 100%!important;
    height: 100%!important;
    transform: scale(1.2);
}
@media only screen and (min-width: 1000px) and (max-width: 1400px) {
.nectar-flip-box .wp-video-shortcode video, 
.nectar-flip-box video.wp-video-shortcode {
    transform: scale(1.6);
}
}
  • Colja replied
    May 29, 2020 at 5:50pm

    Hey,

    thank you! perfect.

    regards

    Manja