White strip impossible to remove

Hey Anton,

Thank you for the inquiry.

Adding this css code should remove the space below the video.

.su-youtube.su-u-responsive-media-yes {
    margin-bottom: 0;
}

The double button on the official site is not available by default, but here is the markup in case you want to use it on your own site.

HTML:

<div class="avia-double-buttons "><a href="https://site.at/themes/enfold-overview/" class="avia-double-button avia-double-button-1">View Demos</a><span class="button_or">or</span><a href="https://1.site.market/" class="avia-double-button avia-double-button-2">Purchase Now</a></div>

CSS:

#top .avia-double-button {
    letter-spacing: 1px;
    padding: 13px 20px;
    text-transform: uppercase;
    font-size: 13px;
    text-align: center;
    min-width: 175px;
    display: inline-block;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    border: 4px solid #fff;
    text-decoration: none;
}

#top div .main_color .avia-double-button {
    border-color: #e1e1e1;
    background: #fcfcfc;
    color: #222222;
}

#top #wrap_all .avia-slide-wrap .avia-double-button, #top #wrap_all .avia-hover-fx .avia-double-button {
    background: #000;
    background: rgba(0,0,0,0.2);
    border-color: #fff;
    color: #fff;
    padding-bottom: 11px;
    text-decoration: none;
}

#top .avia-double-button-2 {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    border-left: none;
}

#top .avia-double-button-1 {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    border-right-width: 2px;
}

.avia-double-buttons {
    margin-top: 30px;
    text-align: center;
    position: relative;
}

#top .button_or {
    position: absolute;
    display: block;
    height: 26px;
    line-height: 21px;
    width: 26px;
    text-align: center;
    top: 50%;
    left: 50%;
    margin: -13px 0 0 -14px;
    background: #fff;
    color: #666;
    border-radius: 100px;
    font-size: 10px;
    border: 2px solid #FFF;
    font-style: italic;
    font-weight: 600;
    z-index: 11;
}

Best regards,
Ismael

Hi,

Thank you for the update.

The issue occurs because the second column inherits the height of the first column, but the video doesn’t adjust accordingly because it has to retain its aspect ratio. Instead of applying the box shadow to the column, we could apply the style directly to the text block or the video inside it. Please disable the box shadow settings, then try adding this css code.

.av-7gxq-b49600b1340770d5ee80faa3053f02f6 .av_textblock_section {
    box-shadow: 0 0 30px 0 #000000;
}

Best regards,
Ismael

Hi,

I followed your instructions and put the code in the text block,

The css code above should be added in the Enfold > General Styling > Quick CSS field or in the child theme’s style.css file, not in the Custom CSS Class field.

Best regards,
Ismael

Hi,

We can’t see the micro white line or border when we checked the site. Please refer to the screenshot below.

Screenshot: https://1drv.ms/i/s!AjjTfXSRbKTvgs1v7e3iH1EqJevsRA?e=Sabave

Best regards,
Ismael