How can i show text side by side embeded video on upfront Accordion ?

i am using the upfront theme with the Accordion element to show a the wpmudev videos.
Im using the embeded shortcodes seen here -
I want to have a text summary of the video content appear on the right side of the videos within the Accordion. However i cant see how to do this.

Please see screenshots
settings page -
visitor view -

Page link -

Support access is ACTIVE until September 15, 2015 1:21 am


  • Adam Czajczyk

    Hey Tom,

    I hope you're having a nice day!

    I've visited your site and added this CSS code to it:

    .accordion-panel-content p {float:left;margin-right:35px!important;}
    .accordion-panel-content p:first-of-type{margin-right:0px!important;}

    I've added it by switching left Upfront panel (while in "Upfront mode") to "Theme settings" and using 'add custom CSS" link to open CSS editor. The code you will find at the very end of the file.

    I hope that helps!


  • Tom

    Hi @Adam Czajczyk

    Thanks for live chat with adam just now.
    we also added this

    .accordion-panel-content strong:first-of-type {margin-left:-85px;}

    im having a little trouble editing the accordian tabs after adding some CSS Codes. getting text overlap in the editor - and but when saving page and testing as visitor it seems to look ok - and (just a little tricky if i need to make changes)


  • Adam Czajczyk

    Hey Tom!

    Thanks for your feedback and keeping the access active. I took another look at the site so let me address the issues "one by one" as they are of various nature.

    1. "Viewing the 'Toolbar'" point on second (02 - Admin Bar) element of accordion:

    This is nothing that can be fixed with CSS. Fortunately, it was enough to "edit text" via back-end and simply remove some spaces/blanks that were added before the text.

    2. Other list elements with too much space between the bullet point and the first letter of text:

    This is exactly the same issue as above. To fix it, simply edit such text and remove additional spaces in front of list element's text

    3. Description titles on front-end (e.g. This 'Add new Page' tutorial covers - for "01 - Adding New Pages" in "Pages section"):

    This turned out to be a bit more complicated than I thought previously because the HTML tags usage is inconsistent here. All these titles are (bold) tags and although most of them are first elements of the type in some cases there are additional elements before (with additional styles). A assume this is not directly related to Upfront, instead being a result of some "glitches" in how WP editor (TinyMCE) is cleaning-up the source code when you edit the course/video description.

    I've changed the CSS code a bit, like this:

    .accordion-panel-content strong {margin-left:-85px;}
    .accordion-panel-content strong span {margin-left:60px;}
    .accordion-panel-content span strong {margin-left:-60px;}

    This partially addresses the issue. However, the real culprit here is that for some reason the order of elements for each accordion tab is "randomly" mixed here, furthermore some elements do have additional inline styles included.

    I've tried various CSS combinations on this but it seems I'm not able to resolve this that way. I will therefore need some assistance from our 2nd-line support team, so I'll asked them for help here.

    That said, please keep an eye on this thread and I'll get back to you immediately once I get an answer from them.

    Thanks for your patience!


  • Tom

    Hi Adam,
    Thanks its looking a bit better. Ill wait for the 2nd line support to take a look.

    I tried also adding the tabs to that page to see if maybe issue is to do with the accordion element.

    can you provide me with some CSS code to see if that can be moved to the right in the same way? -

    I also tried searching for some kind of plugin or widget that would allow me to split the page into two parts (ideally split within the Tabs or accordion so that it can show cleanly side by side)
    I don't mind if text is on left or right as long as it looks clean and tidy.

    If works i can try clone the element and edit the content


  • Adam Czajczyk

    Hello Tom,

    I hope you're well today and I'm sorry for the delay!

    I've just asked our 2nd-line support guys to update me on this urgently. I know you're already waiting very long but as I mentioned before I need them to examine the issue. It seems they may be still overloaded, most likely with new updates. However, I asked them to treat this as priority if possible.

    As for the current "tabs solution". This CSS seems to be working fine on front-end, so would you give it a try please and let me know how it worked?

    p.wpmudev_video {max-width:500px;float:left;margin-right:30px!important;}
    .tabs-content {overflow:hidden!important;padding-bottom:5px!important;}

    Kind regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.