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:
Set Percentage Size to 100%
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:
Set Percentage Size to your desired percentage (e.g. 85%)
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
Last updated