Align and Size an Image with Styles

  • There are several styles available in the toolbar that will help you size and layout images on a responsive page.

    Image styles on the format tab
    • Responsive: required to make an image responsive
    • Left-Aligned Image: puts an image to the left of the page, adds space so text doesn't touch the edges
    • Right-Aligned Image: puts an image to the right of the page, adds space so text doesn't touch the edges
    • Half Width Image: reduces width of image to half on desktop/large and tablet/medium screen size; full width on small/phone size
    • Third Width Image: reduces width of image to third on desktop/large screen size, half on tablet/medium screen size; and full width on small/phone size
    • Side by Side Images: helps align images when they are to be side by side

    Notes:

    • Images must be the same exact dimensions if they are going to be side by side.
    • If an image is going to appear full width only on small/phone and tablet/medium size views, the width should be 737px wide. See more about sizing images.
    • These styles can be used in combination with each other. See below for examples.

    Examples

    Two Side-by-Side Images

    Apply these styles to the first image (to appear to the left): Responsive, Left-Aligned Image, Side by Side Images, Half Width Image

    Apply these styles to the second image (to appear on the right): Responsive, Right-Aligned Image, Side by Side Images, Half Width Image.

    Two Side by Side Images Full View

    Desktop view: Two images side by side.

    Two Side by Side Images Phone View

    Responsive/mobile device view: Two images side by side.

    Three Side-by-Side Images

    Apply these styles to all three images: Responsive, Left-Aligned Image, Side by Side Images, Third Width Image.

    Three Side by Side Images Full View

    Desktop view: Three images side by side.

    Three Side by Side Images Phone View

    Responsive/mobile device view: Three images side by side.

    Single Image Placed Left or Right

    Apply these styles for a single image, aligned to the left or right: Responsive, Left-Aligned Image (or Right-Aligned Image), Half Width Image.

    You can choose either Third or Half width in these cases, depending on your layout.

    Single Right Aligned Image Half width full view

    Desktop view: Image aligned to the right with Half Width Image style applied.

    Single Image Half width phone view

    Responsive/mobile device view: Image aligned to the right with Half Width Image style applied.