How to force a number of galleries on one line

TallPhotoGuy · December 4, 2013

I have 12 galleries, and want 3 rows of 4. Do I need 3 content blocks, 1 for each row, or 12 content blocks. What is the best way. I don't thing forcing the picture size will work, will it. Suggestions?

ChancyRat · December 5, 2013

I have gotten different results by tweaking:
- the thumbnail sizes (1:1, 3:1, etc.)
- margins via the dimensions triangle icon on the block
- container width via Layout on the right side flyout section.

Play with them to see what you can get.

denisegoldberg · December 5, 2013

TallPhotoGuy wrote: »

I have 12 galleries, and want 3 rows of 4.

Keep in mind that you don't have control over the size of the viewing window. You may build something that fits on your browser window but won't fit on mine, or won't fit on a different device.

--- Denise

ChancyRat · December 5, 2013

denisegoldberg wrote: »

Keep in mind that you don't have control over the size of the viewing window. You may build something that fits on your browser window but won't fit on mine, or won't fit on a different device.

--- Denise

Denise would this potential problem be sidestepped by setting the maximum container width? To some extent?

denisegoldberg · December 5, 2013

ChancyRat wrote: »

Denise would this potential problem be sidestepped by setting the maximum container width? To some extent?

I don't think so, not when you are dealing with devices ranging from large monitors to tablets and phones. The device size is really the viewers choice.

--- Denise

thenickdude · December 5, 2013

TallPhotoGuy wrote: »

I have 12 galleries, and want 3 rows of 4. Do I need 3 content blocks, 1 for each row, or 12 content blocks. What is the best way. I don't thing forcing the picture size will work, will it. Suggestions?

If you absolutely want to force this on all devices, it's pretty easy because thumbnails normally have their widths set as percentages anyway. Set the display to grid, and add this CSS:

.sm-page-widget-galleries .sm-tile-wrapper {
	width:25% !important;
}

If you only want to alter the thumbnails if the screen is a certain width or larger, use this instead:

@media only screen and (min-width: 800px) { 
	.sm-page-widget-galleries .sm-tile-wrapper {
		width:25% !important;
	}
}

Add that code to a CSS block on the same page as your gallery block.

denisegoldberg · December 5, 2013

Lamah wrote: »
If you absolutely want to force this on all devices, it's pretty easy because thumbnails normally have their widths set as percentages anyway. Set the display to grid, and add this CSS:
.sm-page-widget-galleries .sm-tile-wrapper {
	width:25% !important;
}

Very interesting, thanks for that!

--- Denise

TallPhotoGuy · December 5, 2013

You have 3 basic devices, monitors, tablets and phones. I don't think we know but with phones is the preferred viewing thru a browser, in which case your customized web needs to work and that's taken into account in your design or do most folks use an app that basically shows pictures only and we only care about a browser with a monitor or tablet.

How to force a number of galleries on one line

Comments