videos side by side?

I’m not sure if the problem is that the videos can’t be next to each other when I use
<div style=”display: inline-block; margin-right: 1px”>
(video)
</div>

Or that no matter what I do the videos are just too big so they don’t fit side by side. Because when I put that html in it looks correct on my screen but when I do a page preview the videos are bigger than they should be.

Hey,
Have you seen our Kadence Blocks plugin? It is an extension for the Gutenberg editor and it makes creating layouts like you’re wanting simple! The Row Layout block should allow you to do this. See here: https://www.kadenceblocks.com/row-layout-block/ Would going this route work for you?

Hannah

Thanks. I looked and I have it installed. But how do I use it?
(at this point I’ve figured out how to have videos side-by-side but not how to make columns different widths, or to get rid of the black bands at the top and bottom of my videos)

You can find documentation here: https://www.kadenceblocks.com/docs/row-layout-block/
How are you adding your videos?

Hannah

I think I used Insert Media but I’ve been viewing it in text mode and playing around with the html. I’ve got the width where I want it now but for some reason the aspect ratio of the videos isn’t right (even though it’s 1.78:1 in the html).

Ah, I look at the code on my website and ytimg is setting the aspect ratio for some reason, overriding my html. I don’t know if that’s part of lazyload for videos but whatever it is it’s screwing up the display.

So, I deleted and re-inserted the video. It’s working now, although for some reason the spacing is odd in one place. Will keep working on it.

Thanks- asking how I inserted the video got me to try it all over again.

Let me know if I can help further!

Hannah

Thanks. I’ve got almost everything figured out. But for some reason when I publish the page, especially if I’ve been in text mode, the paragraph breaks in my bio (the words on the left-hand side below the big photo) keep disappearing and the paragraphs all run together.
I’ve tried hitting enter between them, and I’ve tried putting <P> in the html.

Hey,
Can you link to that?
Thanks!

Hannah

https://www.BrainChampagne.com

It’s probably okay now but when I view that page in html (text) mode and make a change to other columns, it removes the paragraph breaks in the text on the left.

Also while the page looks good on a computer, when I view it on my phone the main image (logo, I guess you call it) which is a photo of me and Jay Leno, becomes huge. I may opt to delete that. But I think if I delete the photo it still puts something in that space. So I have to figure that part out.

Okay, I had the smart idea to replace my logo with a 1 pixel high image so that made the logo disappear (but not have the name of the page take up all that space).

The columns look good on a computer but on a phone or tablet they’re the wrong width. I guess it’s trying to fit all three columns in, and since the other two have videos it won’t just shrink them. But it makes it hard to read the text.

I appreciate that you have a plugin but I’m not an expert with WordPress and don’t want to use anything that’s specific to one theme.

If you want to hide the logo you can do so with this css:

div#logo {
    display: none;
}

Just paste that into your custom css box in Theme Options > Advanced Settings.

Columns are meant to break down on mobile and I’m not sure why yours aren’t. Can you tell me how you’re adding your columns?

Just to note, Kadence Blocks will work with any updated theme. But no worries if you just want to stick with the classic editor.

Best,
Hannah

Thanks. I don’t know what you mean by columns should break down. Do you mean 3 columns becomes one, with column one then underneath that the next column, etc.?

How I added them? I clicked on the menu item and chose 3 columns by 1 row.

It’s on this page: https://www.BrainChampagne.com.

I will try adding the css to delete the logo. Thanks.

That CSS hid the logo but also hid the menu from mobile. So I put back the 1 pixel high image in its place. That’s fine for me.

But the columns on mobile (and narrower browser windows too) are screwy so the left column is way narrower, and that’s the one with text. Any ideas on how to fix?