Big Cartel Theme Support

How do I change the number of product thumbnail columns for the mobile layout?

How do I change the number of product thumbnail columns for the mobile layout?

To set the default number of product thumbnail columns (and rows), refer to How do I change the number of product thumbnails per page and their size? This setting will define the product grid dimensions displayed on all non-mobile sized device screens, e.g. desktops, laptops and larger tablets.

What controls the number of columns displayed for the mobile layout?

Your Aarcade theme will automatically reduce the number of columns for smaller screen devices when the mobile layout is enabled. These smaller screen devices are separated into three size categories: small mobile, medium mobile and large mobile. Following are the general rules that your Aarcade theme follows to decide how many columns to display for each of these size categories:

  • If the total number of products in the grid is an even number then display two columns for small mobile, otherwise display one. This avoids an incomplete final row.
  • Display more than two columns for medium and large mobile screens only if it does not create an incomplete final row and does not create a thumbnail image size significantly smaller than the default thumbnail size (as displayed for large / non-mobile screen devices).
  • Never display equal or greater than the default number of columns for any of the mobile sizes.

How can I influence the number of columns displayed for the mobile layout?

With the above rules in mind, your product grid columns and rows settings - refer to How do I change the number of product thumbnails per page and their size? - can be changed to influence the number of columns displayed for the mobile layout.

Example 1: If you set 5 columns and 5 rows you will have a total of 25 thumbnails in your grid. 25 is not even, so we know from the rules that this will display a one column grid for small mobile. We also know that, since the default number of columns (5) can not be used and 25 is not divisible by 4, 3 or 2 (that is to say, 4, 3 and 2 column grids will all create an incomplete final row), a one column grid will also be displayed for both medium and large mobile sizes.

Example 2: If you set 4 columns and 3 rows you will have a total of 12 thumbnails in your grid. 12 is even, so we know from the rules that this will display a two column grid for small mobile. We also know that, since the default number of columns (4) can not be used and 12 is divisible by 3, a three column grid will be displayed for both medium and large mobile sizes.

How can I set the exact number of columns displayed for the mobile layout?

Custom override styles can be used to set the exact number of columns for each mobile size. This is achieved by referencing the dynamic size classes applied to the body tag - see Using the body tag to create page specific custom styles - and setting the percentage width of each thumbnail to achieve the number of columns desired.

For example, if we navigate to your custom style coding area — see Where do I add custom style code? — and add the following CSS..

/* Set 5 column product grid for large mobile */
.large-mobile.mobile-ui-enabled .products.grid.auto-size > .inner > .tile {
	width: 20% !important;
}

..we will get a 5 column grid for the large mobile screen size. Note that we must express the width as a percentage, which is calculated by simply taking 100% and dividing it by the number of columns we desire. So, in this example, 100% / 5 = 20%.

Further styles can be added for each of the remaining mobile sizes, i.e. .medium-mobile and .small-mobile. Expanding our example, we might have:

/* Set 5 column product grid for large mobile */
.large-mobile.mobile-ui-enabled .products.grid.auto-size > .inner > .tile {
	width: 20% !important;
}
/* Set 3 column product grid for medium mobile */
.medium-mobile.mobile-ui-enabled .products.grid.auto-size > .inner > .tile {
	width: 33.33333333333333% !important;
}
/* Set 1 column product grid for small mobile */
.small-mobile.mobile-ui-enabled .products.grid.auto-size > .inner > .tile {
	width: 100% !important;
}

What about large screen devices?

If you have referred to Using the body tag to create page specific custom styles you would have noted that the above method can also be used to set the number of columns for different monitor (non-mobile) sizes. For example:

/* Set 5 column product grid for medium monitor */
.medium-monitor .products.grid.auto-size > .inner > .tile {
	width: 20% !important;
}

Note that we have removed the .mobile-ui-enabled class from our style (compared to the previous examples in this article) since the mobile layout is not relevant on large screen devices.

Refer to Using the body tag to create page specific custom styles for a full list of available web browser display size classes.

AarcadeHow do I change the number of product thumbnail columns for the mobile layout?