How can I reduce spacing around images?

Hi,

Please can you update this ticket with admin credentials so I can take a look at the page in the back-end. Also please let me know which specific images are you trying to remove the 15px padding either side from.

The aspect ratio won’t be automatic if it’s a background video. You’ll need to adjust the height of the row to suit your video. If it’s 16:9 you can use this tool to get an idea of sizes https://www.size43.com/16by9-aspect-ratio-calculator/.

If it’s absolutely imperative that the video displays perfectly each time then you should look at embedding it directly within the row and not as a background video – this way it will always appear as originally intended.

Thanks,

Kieran.

Hi,

Thanks for getting back to me, so I do not overwrite any of your page content I created a new page titled ‘New Home Page SQ’ which has the URL of https://bondhome.io/new-home-page-sq/.

What I changed:

– Video row, I clicked on the pencil icon for the row and checked the option ‘Full height row?’ under the tab ‘General’ within WP Bakery (formerly Visual Composer). Let me know if this shows enough of your video or not. See screenshot for how to do this.

– ‘Best of Show’ images row, I clicked on the pencil icon for the individual columns and set the padding value to 0 (left and right) under the ‘Design Options’ tab. See screenshot on how to do this.

– ‘Fireplace / Garage Door’ images row – as above. I clicked on the pencil icon for the individual columns and set the padding value to 0 (left and right) under the ‘Design Options’ tab. See screenshot on how to do this.

– Set the title to not show to be in line with the wireframe image you sent. I scrolled down past the editor to the area titled ‘Theme General Settings’, clicked the tab titled ‘Title section’ and checked the option ‘Hide the title’. See screenshot on how to do this.

Thanks,

Kieran

Hi,

I’ve gone back into the page to investigate the ratio issue of the video, I found that you had set the video background to the column and not the row. I have changed this and reduced the padding you’re using which shows a lot more of the video. However this still takes up most of the visible space – reducing the px padding used will cause you to see less of the video.

The video height cannot be set automatically because it is a background video, much like a background image, it will only show in the background of the element it is in, so the element needs to be a certain height. For you, this is generated via the padding you have in place. For the same reasons (background) you also cannot have audio in a background video by default.

You can set the padding to 0 for the top and bottom of each row to achieve the effect of no spaces between each row. You can click on the pencil icon for the row, select the general tab and scroll to the padding section.

You can remove the padding at the end of rows by going to each row you wish to have this effect, click the pencil icon for the row, select the tab ‘General’ and scroll to ‘Inner Container’, set this option to no. This will remove the padding left and right from the row.

Sometimes you may need to set a value of 15px for left and right padding with the above feature enabled. You can do that by following the same steps from above but instead scroll to the padding section of the ‘General’ tab.

Thanks,

Kieran

Hi,

If you have intermediate to advanced HTML skills you could use the KLEO Magic Container within WP Bakery to embed the video in div 1 and overlay your text in div 2. However YouTube doesn’t appear to allow autoplay via embed anymore so your video wouldn’t automatically stater as it does now. There is also the issue that you would need to make this responsive as the above described wouldn’t worked well on mobile without some more advanced CSS.

I will direct this ticket to a developer who may be able to assist you with your need. They’ll be in touch as soon as they can, but they are available Mon to Fri only, East Europe Time. You may have to wait a day or two before you receive a reply depending on their current work load.

Thanks,

Kieran

Hi

Let me know more exactly what you need to achieve ?!

Cheers
R.