Size Controls for Image & Video Blocks

There are two settings that work together to control the size of your media (images or videos):

1. Percentage Size (%)

This percentage determines how much of the available space your media can use:

• 100% allows the media to use all available space (up to the max-width)

• 50% means the media will use half the available space

• 10% means the media will use one-tenth of the available space

2. Maximum Width (px)

This sets the largest size your media can be, in pixels:

• Enter a specific pixel value (e.g. 400) to control the exact size

• Leave empty to allow the percentage to control sizing completely

How to Achieve Common Sizes

For a specific fixed size on all screens:

1. Set Percentage Size to 100%

2. Set Maximum Width to your desired size (e.g. 400px) This ensures your media will be exactly 400px wide on all screens where space allows

For responsive sizing:

1. Set Percentage Size to your desired percentage (e.g. 85%)

2. Set Maximum Width to prevent too-large sizes (e.g. 300px) Result: Media will be 85% of container width, unless that would exceed 300px, in which case it stays at 300px

Examples

Fixed size:

• Percentage Size: 100%

• Max Width: 40px Result: Media will always be 40px wide

Responsive with maximum size:

• Percentage Size: 50%

• Max Width: 300px Result: Media will be 50% of container width, but never larger than 300px

Large responsive:

• Percentage Size: 80%

• Max Width: (empty) Result: Media will always take up 80% of container width

Tips

• For exact sizes, use 100% width and set your desired size as max-width

• For responsive designs, use a percentage width and optionally set max-width to limit maximum size

• Test your settings at different screen sizes

• Remember: Images and videos will maintain their aspect ratio while scaling