columns (c) pexels

Dynamic Columns

Breadcrumb

This layout displays 2 columns per row for a desktop or laptop, and one column per row for a tablet or cellphone.  Use your judgement and test on devices of all sizes to find which column amounts work best for you. This block includes a background color. The text has been changed to white.

In this row, the first Dynamic Column Content item contains an image of the owl.  This second Dynamic Column Content item (this one) contains text.  If you shrink your browser window down, you will see that at a certain point the four separate Dynamic Column Content areas will responsively re-adjust and move to a 1 column layout.  

On a cellphone, an image always looks better if centered, so it is best to always center content that is purely an image.  We suggest that if you are using several images, make them all the same width, if not also the same height.  This way, when you center them, they will align and look good whether in a 1, 2, or 10-column layout.

 

man on a mountain with a backback (c) UCR

In this custom block example, the first image has been centered, and the second image is aligned-left.  Please do shrink your browser window so you can see how they react, especially in a 1-column layout which is what you will normally always choose for small screens.

Let us help you with your search