• Hi. This is driving me crazy. I want to have text on the left, then two videos side by side (and then two more then two more).
    I tried it with columns but no matter what I did the text column came out too narrow (I’d like it to be around 50% so the text and videos end at the bottom around the same place).
    Even when I specified 50% 25% 25% for the three columns in the html code it didn’t work. Sometimes it came out with the text column even narrower.
    So I tried changing it to two columns but I couldn’t figure out a way to put the two videos side by side. I tried several methods I found by searching but none of them worked.
    I’ve even put in code to make the videos smaller but it’s not changing anything- they’re still filling up the space.
    For what it’s worth I understand some html but if I can avoid css that would be great since I don’t understand it.
    https://www.BrainChampagne.com is the page I’m working on.
    Huge thanks to anyone that can help me.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 16 through 30 (of 38 total)
  • hannah

    (@hannahritner)

    Yes, the columns should become a single column on mobile. Do you think you can send me a screenshot of your edit page? Sorry, I just want to understand how you have things set up so I can recreate it. https://imgbb.com/

    You can use this css to hide the logo:

    img.kad-standard-logo {
        display: none;
    }

    And this will increase the mobile header height:

    @media (min-width: 768px) {
    .col-md-4.clearfix.kad-header-left {
        min-height: 60px;
    }
    }

    Hannah

    Thread Starter shaunshaun

    (@shaunshaun)

    I can’t easily screenshot it because it takes up more than one screen but here’s the html/text mode:

    <h1></h1>
    <table class=” alignleft” style=”width: 100%; border-collapse: collapse;”>
    <tbody>
    <tr>
    <td style=”width: 46%; text-align: left; vertical-align: top;”>
    Stand-up comedian Shaun Eli has rightfully been called one of America’s smartest comics. Whether it’s a story about dining with a vegetarian or successfully fighting a parking ticket, master storyteller Shaun Eli shows you that there’s hilarity in the ordinary if you approach life with a comedic warp. Job interviews? Serving on a NYC criminal jury? How about the Ten Commandments? For just about anything he’s experienced Shaun has a hilarious story at the ready.?
    His jokes have been quoted everywhere from the New York Post to Readers Digest to Healthcare Finance News. He’s been featured on CareerBuilder.com and CNN, in local papers like the Scarsdale Inquirer and the Asbury Park Press and in the college papers the Yale Daily News and the Daily Pennsylvanian. Even in The Journal of Irreproducible Results, a scientific humor magazine. Yes, there is one. And his group The Ivy League of Comedy<sup>sm</sup>?was the subject of a front-page story in the Philadelphia Inquirer. Shaun was also the subject of a cover story in the Christian Science Monitor.

    More than just smart, funny and clever, Shaun is determined to express his opinion passionately, not surprising for someone who wrote his first satirical essay at age ten. When profiled in Fortune magazine “Tonight Show” host Jay Leno quoted one of Shaun’s jokes, citing it as an example of the type of “smart comedy” he’s happy to include in his opening monologue. Jay and other late-night hosts have used Shaun’s topical material in their monologues for more than a decade.

    Outside the world of comedy Shaun was a world-class athlete in two obscure sports (rowing and dragon-boat racing), worked as a lifeguard instructor and is an instrument-rated pilot. He is also an award-winning economic forecaster who once sold his car to a hitchhiker.

    Shaun is a graduate of the Wharton School of the University of Pennsylvania. You can watch his videos and read some of his writings, including satirical political essays and hundreds of jokes he’s written for late-night television, on his web site BrainChampagne.com where his slogan “Brain Champagne: Clever Comedy for Smart Minds<sup>sm</sup>” rings true.</td>
    <td style=”width: 27%; text-align: left; vertical-align: top;”>
    <div style=”max-width: 360px;”>

    [embed width="300" height="168"]

    <center><b>Your iPhone does not impress me</b></center><center><iframe src=”//www.youtube.com/embed/zCr-pbPL5Qc” width=”300″ height=”168″ allowfullscreen=”allowfullscreen”></iframe></center><center><b>
    Sometimes the biggest laughs are
    when you talk about somewhere else</b></center><iframe src=”//www.youtube.com/embed/DjjqtipHBQ4″ width=”300″ height=”168″ allowfullscreen=”allowfullscreen”></iframe>

    <center><b>At a charity fund-raising show</b></center><iframe src=”//www.youtube.com/embed/jmyelUgEZ98″ width=”300″ height=”168″ allowfullscreen=”allowfullscreen”></iframe>

    <center>(improvising when something goes wrong
    gets me applause 20 sec. into the show)</center></div></td>
    <td style=”width: 27%; text-align: left; vertical-align: top;”>
    <div style=”max-width: 360px;”>

    [embed width="300" height="168"]

    <center><b>Perhaps my second-dirtiest joke</b></center><center><iframe src=”//www.youtube.com/embed/RvhG5nYsVDs” width=”300″ height=”168″ allowfullscreen=”allowfullscreen”></iframe></center><center><b>
    Putting a stupid Supreme
    Court decision to good use</b></center><iframe src=”//www.youtube.com/embed/HtUwjevb3XE” width=”300″ height=”168″ allowfullscreen=”allowfullscreen”></iframe>

    <center><b>Dating a Doctor</b></center><iframe src=”//www.youtube.com/embed/5HrMrwXkBo4″ width=”300″ height=”168″ allowfullscreen=”allowfullscreen”></iframe>

    </div></td>
    </tr>
    </tbody>
    </table>
    <span style=”font-family: arial,helvetica,sans-serif;”><span style=”font-size: 18pt;”><span style=”color: #0000ff;”>Invest in your happiness. Come to a comedy show!</span></span><span style=”font-size: 10pt;”><sub><span style=”color: #0000ff;”>sm</span></sub></span></span>
    <p style=”text-align: center;”><span style=”font-size: 18pt;”><span style=”color: #000000;”>Additional comedy videos</span></span></p>

    <table style=”border-collapse: collapse; width: 100%; height: 20px;”>
    <tbody>
    <tr style=”height: 20px;”>
    <td style=”width: 33.3333%; height: 20px; text-align: center; vertical-align: top;”><b>Letterman-style News Quiz</b>
    <iframe src=”//www.youtube.com/embed/TB7sP39Vhlc” width=”300″ height=”168″ allowfullscreen=”allowfullscreen”></iframe></td>
    <td style=”width: 33.3333%; height: 20px; text-align: center; vertical-align: top;”>Shaun Eli: Wall Street Correspondent<iframe src=”//www.youtube.com/embed/AhnaWwe9egk” width=”300″ height=”168″ allowfullscreen=”allowfullscreen”></iframe></td>
    <td style=”width: 33.3333%; height: 20px; text-align: center; vertical-align: top;”>Real Estate Rules for Living<iframe src=”//www.youtube.com/embed/-mcvIqCdo6U” width=”300″ height=”168″ allowfullscreen=”allowfullscreen”></iframe></td>
    </tr>
    </tbody>
    </table>
    <h2><span style=”font-size: 12pt;”>Clean comedian Shaun Eli performs worldwide- call or email to ask about hiring him for your corporate function, industry conference, charity event, private party, community group, service organization, theatre or comedy club.</span></h2>
    <h2><span style=”font-size: 12pt;”>logo board: a collage of various venues where Shaun has performed, and publications that have written about him</span></h2>
    <span style=”color: #0000ff;”>?I’m frequently asked how I got started in stand-up comedy.
    Why does a man do anything? It was because of a woman.
    I was on a date and I guess I was entertaining because she asked why I wasn’t a comedian. I said I had friends who were actors- and that while I like writing comedy I didn’t think I was made to be a performer.
    She told me she’d just taken a stand-up comedy class and recommended I do the same.
    I did. Six years later I left my day job. And here I am.
    Come see me; I’m sure you’ll agree I made the right decision.</span>

    <span style=”color: #000000; font-family: times new roman,times,serif; font-size: 10pt;”><span style=”text-decoration: underline;”>Privacy Policy for BrainChampagne.com, IvyStandup.com, LibertyComedy.com and affiliated websites</span></span>

    hannah

    (@hannahritner)

    Rather than embedding your videos, try using the Youtube shortcode (from the virtue shortcodes tab). Have you tried this?

    Hannah

    Thread Starter shaunshaun

    (@shaunshaun)

    Argh, just tried that and it made it way worse- still 3 columns but the videos I changed (3 of the 6) are now the wrong aspect ratio- they’re tall and skinny and look terrible.
    I’ll leave it for now so you can see it: https://www.BrainChampagne.com. But I don’t want to leave it that way.

    hannah

    (@hannahritner)

    The videos are actually responsive now, it’s your columns that aren’t. How exactly are you adding your columns?

    Hannah

    Thread Starter shaunshaun

    (@shaunshaun)

    How did I add the columns? I used the Table setting from the menu at the top. Not sure if I clicked on the grid image or the drop-down menu that says table but it was one of those.

    I used the Table setting from the menu at the top.

    Tables are not good to use in a responsive layout. You need to add columns. Are you using the block editor, there are nice columns you can add right through a block.

    If you are not wanting to use the block editor then you need to use some column shortcodes.

    Ben

    Thread Starter shaunshaun

    (@shaunshaun)

    Not using blocks because figuring out regular WordPress was too much work already. But then I don’t know what column shortcodes are either.

    Thread Starter shaunshaun

    (@shaunshaun)

    Okay, I thought I’d learn blocks. But I can’t find the menu that includes the youtube shortcode, nor how to change column width percentages.

    Using blocks, many people find that easier than the old way with the classic editor.

    In blocks you don’t use shortcodes, add a columns block, and then add a youtube block in one of the columns.

    Ben

    Thread Starter shaunshaun

    (@shaunshaun)

    Thanks. I got that done. Strangely. It was only the middle column that, when I clicked in it, would show the menu including the youtube icon to click. So I had to put everything in the middle column and then cut and paste it into the other column.

    I have two sets of columns (www.BrainChampagne.com if you want to look- the top with my bio next to two more columns of three videos each, and then below three videos, one in each column).

    But when I watch tutorials about how to change a column width they say I can drag a column border to widen it, but that doesn’t work on my site. There’s nothing to click on and drag.

    @shaunshaun What tutorial are you watching, the core column block is likely different from the block you are looking at in the tutorial. For example, in our Kadence Blocks plugin, we have a row layout block that has this option.

    Ben

    Thread Starter shaunshaun

    (@shaunshaun)

    I pulled up a bunch of random youtube tutorials so I realize they may not apply. Doing the best I can.
    Are you talking about this plugin? Kadence Blocks – Gutenberg Page Builder Toolkit
    I have that installed.

    I have a 3 column block (if that’s the right word) at the top of this page: https://www.BrainChampagne.com (just below the big image).

    How do I manage the width of the columns? BTW it’s only the middle column that, when I click on it, pulls up the editing menu. I had to put everything in that column and then cut and paste into the other two in order to use the kad youtube feature.

    I appreciate all the help I’m getting.

    Hey
    You are using the core column block. If you want to control the widths you need to use the “row/layout” block which is a Kadence Block.

    Ben

    Thread Starter shaunshaun

    (@shaunshaun)

    Okay, so I select a 3 column row layout block (50/25/25). How do I put text into it? I click in the box but nothing happens. (FYI I’m using Chrome)

Viewing 15 replies - 16 through 30 (of 38 total)
  • The topic ‘videos side by side?’ is closed to new replies.