How to control the number of columns on your AwesomeWall

Our 'off the shelf' AwesomeWall product is fully responsive, and so it sets different column numbers by default depending on the device. However, recently we've found that more people want control over how many columns of images are shown on their AwesomeWall at different screen sizes.

This is easy to achieve using the Custom HTML option; a feature for users with a bit of coding know-how.

Step One

Open your AwesomeWall admin area

Step Two

Add the following code into the Custom HTML box:

<style>
/* Wide desktop sizes */
@media (min-width: 1400px) {
   .masonry-brick {
     width: 16.66%; }  // 6 columns
 }

/* Medium desktop sizes */
 @media (max-width: 1100px) {
   .masonry-brick {
     width: 25%; }  // 4 columns
 }

/* Smaller Desktop sizes */
 @media (max-width: 900px) {
   .masonry-brick {
     width: 33.33%; }  // 3 columns 
 }

/* Tablet size */
 @media (max-width: 750px) {
   .masonry-brick {
     width: 50%; }  // 2 columns 
 }

/* Mobile size */
 @media (max-width: 500px) {
   .masonry-brick {
     width: 100%; }  // 1 column
 }
</style>

Step Three

The width percentage value for each size specifies how wide one column of images is on your AwesomeWall.

Let's look at a couple of examples:

  • For Smaller Desktop Sizes you could specify a width of 33.33% which is about one third. This value makes the wall three columns wide.

  • For Mobile you could specify a width of 100%, this only allows for one column of images.

That's it!

Interested in AwesomeWall?


AwesomeWall is a tool that allows you to pull in user generated content from Twitter, Facebook, Instagram and Vine into any website or screen.

Contact Us

Loved by big brands and small: