The easiest way to do this is to use the "flex" styles provided by your template. These are handy shortcuts for creating FlexBox layouts -
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In the example below, using your existing article, I do the following:
- Edit the Youtube video in the Media Manager, and remove the uk-margin-top style.
- Select the image, and remove the margin from it using the Remove Formatting button (easier than opening the Image Manager to do this simple task). We won't need this margin because of the flex box styling.
- Click somewhere in the paragraph, and select Paragraph from the Format list to remove it, as we are already inside a DIV and don't need the additional paragraph.
- Click on DIV in the Path at the bottom of the editor to select it, then open the Attributes dialog. In the Classes field, add the flex classes - uk-flex uk-flex-center uk-flex-wrap
The image looks a little stretched in the editor display, but you can see in the Preview that it displays perfectly, with both the image and video neatly centred and the same size.
[video]
Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.