So, when the browser window is wide – at least 1025px or larger on the x-axis – then you will be displaying images in six columns. So the thumbnail cells will be (100/6)% of the available width.
Let’s say your viewport (or your layout) has a max-width of 1140px. Then your thumbnail cells will be only 190px wide; the thumbnail images will then be (190 - padding - borders), so … small.
So you can increase the size of the images by:
- reducing the margin between cells
- reducing the border around cells
- reducing the padding within cells
- decreasing the number of columns displayed at a given breakpoint
By using the Columns at Screen Breakpoints sliders, you can set different numbers of columns to be displayed on desktop wide-screens, laptop displays, tablets in landscape or portrait orientation, on mobiles, etc. based on the width of the display.
<= 1024: 5
… displays images in five columns on an iPad held in landscape orientation
<= 992: 4
… then will display images in only four columns when that iPad is rotated to portrait orientation.
Taken together, these two settings can be understood as:
When the display is between 993 and 1024 pixels wide, display five columns. When 992 pixels or narrower, display four columns (until the next breakpoint).