Panino - placing elements side by side

I'm rebuilding a theme here:
http://uig-fr.dangeroustactics.com/

I'm attempting to place two widget areas side by side. Nothing I've tried seems to allow this. It seems simple, and it looks exactly right in the editor. But when I render the site in a browser to test it, the widgets are on top of each other no matter what I do.

I even tried absolute positioning in CSS editor, and that moved the widget in the opposite direction as expected. I've enabled support access in case it's needed.

I am trying to build a grid of four widgets. There are currently two in place, and as soon as I get them side by side, I'll need to create two more right underneath. Any insight into how to make this happen is much appreciated.

  • Christian

    Quick update. I found that by editing positioning in CSS, I can force the elements side by side by using some really extreme positioning, but now of course the mobile view is totally destroyed. It's also rendered the visual editor mostly useless, because the visual editor representation is so far off, that the widget is completely off the page. Any insight into how to get elements to appear in a browser as they appear in the editor is much appreciated!

  • Nithin

    Hi Christian,

    Hope you are doing good today.

    Did you make any changes to the theme files, by editing the theme files located under /wp-content/themes? If yes, then these changes won't work, and Upfront doesn't behave like a default WordPress theme, as it doesn't have a same workflow when it comes to editing the theme. All changes/customization to the theme should be only done through the Upfront Editor.

    Could you please try re-uploading the files of Panino theme in order to restore the Upfront Editor to its own form, you'll have make use of a FTP client in order to upload these files, inside the /wp-content/themes folder.

    https://premium.wpmudev.org/download/2028016332_uf-panino-1.1.1.zip

    Please let us know how that goes, so that we could give a closer look to your original issue. Have a nice weekend.

    Kind Regards,
    Nithin

  • Christian

    Hi Nithin. I have not edited theme files. All edits have been performed inside Upfront editor. You're viewing the wrong site. Sorry for the confusion. I have a separate ticket open on the issue you mentioned.

    The site with the completely missing editor is uig.dangeroustactics.com.

    The site I'm asking about is uig-fr.dangeroustactics.com. I'm rebuilding on another subdomain, because the first subdomain I built (uig.dangeroustactics.com) is completely unusable, so I thought I would make another attempt.

    To reiterate, I want to know how to place theme elements side by side. The domain in question is uig-fr.dangeroustactics.com.

    Any insight is much appreciated!

  • Rupok

    Hi Christian,

    Thanks for confirming which site to look at. I went to uig-fr.dangeroustactics.com and found the right box is 15px below the above region. To fix that, you can use the following custom CSS:

    .upfront-output-object {
      padding: 0 15px;
    }

    You can use Global Theme CSS section in Upfront Editor for using this custom CSS. Please check the attached screenshot for reference.

    Please let us know if it doesn't do exactly what you want. We will be glad to assist further.

    Have a nice day. Cheers!
    Rupok

  • Christian

    Hi Rupok. Apologies for any miscommunication. I thought it would be abundantly clear which widgets I'm addressing. The two elements you're referring to are image elements. The difference you see on those is simply because I haven't set padding settings yet. This is my attempt to find a workaround to the issue.

    The widgets I'm having an issue with are underneath that. One is labeled "About". The other is labeled "Events". These are not image elements. They are widget elements. I assigned a text widget to each one. I put HMTL in the text widget, and I styled each with the built in CSS editor. They look and act as expected, but they won't sit side by side as indicated in the Upfront editor.

    They look like they should in Upfront editor, but in a browser they're all over the place. If I minimize my browser window, the Events widget just disappears offscreen somewhere. In mobile, the layout is completely broken.

    In an attempt to determine whether or not my markup was causing an issue, I set up two text widgets exactly as before and put nothing but text in them...no HTML or CSS at all. Those two widgets also will not sit side by side. Again, they looked fine in the editor, but in a browser, they were on top of each other, and totally haywire in mobile.

    It seems the widget elements are not working properly. This is what I'm trying to clarify.

    When you view the site in mobile, you'll immediately see what I'm describing. If you look in a normal browser currently, you'll see the About and Events widgets sitting side by side as expected, but this has only been able to be accomplished with extreme positioning tweaks via CSS. In the editor, they'll all over the place.

    It seems I can choose between being able to see the elements I'm developing in the editor, or I can see them on top of each other (not side by side) in the browser. But I can't have both. And truly, neither of these options is what makes sense to me. As Upfront is a visual editor, what I'm expecting is to be able to set up both widgets side by side in the editor and for them to also appear side by side in a browser. Is this possible?

    Again, I'm not referring to the top two image elements. I'm setting those up as an alternate approach in case my preferred configuration proves impossible. If you view the site in the editor or in mobile, you'll see what I mean. The elements I'm referring to are the two widget elements right under that. One is labeled "About". The other is labeled "Events". Can you see these two elements? How do I get them to work properly? Any insight is much appreciated! Thank you.

  • Christian

    I need to add that I stand corrected. This site is evidently 100% broken as well. It was working fine last night. All I did was go to bed and log back in, and now the site is completely locked up and the editor is gone. I have not edited theme files. I've reinstalled the theme repeatedly and have now built this site numerous times on two separate domains. I will build it yet again on a third domain, and I will reinstall the theme yet again. I will build the new theme without any custom html or css of any kind.

    I'm not sure what else to do. I can't imagine how css would destroy the editor itself, but that's the only "weird" thing I've done while building this site.