Media Styles
There is a collection of styling that can be applied to media items. These options include sizing, floating, margins, animations, and anything else your theme provides.
When you select a media item in the editor, a tooltip pops up which contains a button to edit the media as well as a dropdown containing the styles.
Style Options
Sizing
Width 25% - The media item's width will be a quarter or the width of its container.
Width 33.33% - The media item's width will be a third of the width of its container.
Width 50% - The media item's width will be half the width of its container.
Width 66.66% - The media item's width will be two-thirds of the width of its container.
Width 75% - The media item's width will be three-quarters of the width of its container.
Width 100% - The media item's width will be the full width of its container.
Width 100% on SM screen - The media item's width will be the full width of its container when the screen is less than 768px wide.
Width 100% on XS screen - The media item's width will be the full width of its container when the screen is less than 544px wide.
Alignment
Center
Align Right
Float Left/Right - Floating media will allow text to flow around it rather than being pushed to the next line.
If you want to prevent content from wrapping around this media (i.e. the next section of content) you can apply the "Clearfix" block style[1] to text or the "Clearfix" media style to any media item that you want to ensure is on it's own line.
Clearfix - This prevents the element from wrapping around any floated elements.
Margins - Adding margins will add spacing around the element.
Other Styling
Elevate - Adds a box shadow to the element.
Fade In - The element will fade in when it appears on the page.
Image Zoom - Images in the element will be able to be clicked on and go into a full-screen view.
Circle Image - Images will become circles if they're squares, or ovals they're rectangles.
Rounded Corner Images - Images will have rounded corners.
