Using Images in Mega Panels


A flexible Mega Panels layout works best when images are properly sized.  An example use-case would be having three panels in a row, each with an image that fills the width of each panel. 

Screenshot of three panels, each with an example image filling the space inside

In order for the image to fill the space allowed in the panel, create the images with the correct width to correspond with the size of the panel.

Width of Panel Minimum Width
One Half 540px
One Third 360px
One Quarter 220px

For example, if your panels are each on third the width of the row, images should be at least 360px wide. 

Full width images on narrower screens

If you would like the image to fill the full-width of the panel even when the panels begin to move into a single column on narrower screens, create the images at a width of 730px. The images will then shrink and grow with the panel.  

Screenshot of three panels in one column, each with an example image filling the space

Note: Be sure that your images have been resized down to no more than 730px wide for Mega Panels column panels. Very large image could impact page load time, which can be a usability issue for users with slower internet connections.