Hello,

We are using a row in the visual composer using 1/4 + 1/2 + 1/4 columns and we have placed a video in the central 1/2 column and simply set the background to black for the left and right 1/4 columns.

This appears as we wish on a laptop/computer screen but on narrow devices/resolutions the 1/4 columns on the left appear above and below the video (as they should), however we wanted to hide these black columns on narrow devices/resolutions.

Any suggestions would be appreciated.

The 1/4 + 1/2 + 1/4 columns are at the top of http://kitchenmatic.co.uk.

Thank you. 

Hello Tahir,

I just added hide-col to the Extra Class Name on the left and right 1/4 columns but they still appear on narrower browsing resolutions.

Any suggestions would be appreciated.

Thank you.

Bharat

Thank you,

The 480px worked for the very narrow resolution but for some gradual higher resolutions the responsive left and right 1/4 columns were still appearing above and below the video.

I slowly dragged the browser window and made it wider and noticed it was up to 1024px width that you CSS was required so I used:

@media only screen and (max-width:480px) {
    .hide-col {
        display: none !important;
    }
}

However around the 1024px width the left and right 1/4 columns no longer appear with the display:none CSS but the 1/2 video column is ranging left.

Could you suggest how we could:

1) ideally centering the video column with the new CSS, or

2) making the video column full with of the browser.

Thank you,

Hello,

I added the CSS but it doesn't seem to have made any difference.

There seems to be a browser width (including the browser frame) from approximately 1017 to 1040 where the video appears aligned left.

At lower resolutions it's full width and higher resolutions it uses the central 1/2 column and the left and right 1/4 columns are black which is fine.

It's the above approximate range from 1017 to 1040 that is causing the align left.

You can see at 1024 x 768 that the video appears aligned left and for the range you can replicate it by using a slightly higher resolution such as 1280 x 720 and dragging the browser window slowly from max width to a narrow width when not maximised.

I tried looking at the main CSS file to see if there where any media queries at these pixels ranges but I couldn't find anythign appropriate.

Your suggestions would be appreciated.

Thank you,

Bharat

Thank you "I am Nectar".

That was very simple and it works.

And have a great Christmas.

Bharat