Center Title Over Single Photo Blocks in SmugMug - Mike Matenkosky

Center Title Over Single Photo Blocks in SmugMug

Image Title

This is a caption. Here is a link within a caption.

This is another paragraph using a <p> tag.

This is a bold text. This is an italic text.

Image Title

This is a caption. Here is a link within a caption.

This is another paragraph using a <p> tag.

This is a bold text. This is an italic text.

Image Title

This is a caption. Here is a link within a caption.

This is another paragraph using a <p> tag.

This is a bold text. This is an italic text.

There was a question on the D-Grin forum on how to center a title over a single photo block here. So I came up with a solution and I thought I'd share it here.

Thie example shows three Single Photos spaced horizontally. Copy the code below and paste that into your Theme's Custom CSS Section.

Next, you will need to use a webtool to find what [data-layout-row] you are on on your page. I use Firefox "Inspector Element". In this example the row I have is 'k'. Edit the code you previously copied to match your correct row.

Use a webtool to find the correct row

If you did it correctly, you should see your images with a title centered.

Since using a single photo block to do this is kind of a pain, I came up with another solution using a single HTML/CSS block. Here is what I came up with...with a twist: Services Page with Image, Description and More.

CSS


/**
 * Center Title Over Single Photo Block
************************************************/
.sm-page-layout-row[data-layout-row="k"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
	
.sm-page-layout-row[data-layout-row="k"] .sm-page-layout-column[data-layout-column="0"],
.sm-page-layout-row[data-layout-row="k"] .sm-page-layout-column[data-layout-column="1"],
.sm-page-layout-row[data-layout-row="k"] .sm-page-layout-column[data-layout-column="2"] {
	width: 350px !important;
	margin: 0 auto 1.5rem;
	padding: 0 0 1.5rem;
	max-width: 100% !important;
	justify-content: center;
}	

	/* Positioning and Text Box Sizing */
.sm-user-ui .sm-tile-single { position: relative; }  

	/* Title and Caption Container */
.sm-user-ui .sm-tile-title {
	position: absolute;
	transform: translate( 0, -50% ); 
	bottom:   50%; 
	left:  0; 
	right: 0;
	text-align: center; 
	margin: auto;
	padding: 10px 0;
	background: rgba( 0, 0, 0, .8 );
}	
	
	/* Single Photo Styles */
.sm-user-ui .sm-tile-single.sm-tiles-uncropped .sm-image { box-sizing: border-box; }

Powered by SmugMug Log In