Power Platform Community Forum Thread Details

I am trying to build a single page letter size photo grid similar to the example below using Encodian's HTML to PDF conversion action. My knowledge of HTML & CSS is limited.

Any help would be appreciated.

In Edge my code produces this, which is exactly what I'm looking for.

Edge Browser Results

Power Automate - Encodian Action Results:

Power Automate Results

My Code:

<!DOCTYPE html>
<html>
	 <head><meta http-equiv="content-type" content="text/html; charset=utf-8"/></head>
	 <style>
		 
* {
			box-sizing: border-box;
			margin: 0;
			padding: 1px;
	 	}
		 
	 	body {
			background-color: white;
			padding: 5px;
			font-family: Arial;
	 	}
	 	
	 	hr {
			color: #1F3864;
	 	}
	 	
	 	h2 {
			font-size: 20px;
			color: #1F3864;
	 	}
	 	
	 	h3 {
		 	font-size: 16px;
		 	color: #1F3864;
		}
		 
		.row {
		 display: flex;
		 flex-wrap: wrap;
		 padding: 5px;
		}
		
		/* Create four equal columns that sits next to each other */
		.column {
		 flex: 25%;
		 max-width: 25%;
		 padding: 2.5px;
		}
		
		.column img {
		 margin-top: 0px;
		 vertical-align: middle;
		 width: 100%;
		}
		 
	 	/* Content */
	 	.content {
			background-color: ghostwhite;
			width: 100%;
			padding: 5px;
	 	}
		 
		 /* Responsive layout - makes a two column-layout instead of four columns */
		 @media screen {
			.column {
			 flex: 50%;
			 max-width: 100%;
			}
		 }
			
	 }
	 
	 </style>
	 
	 
<!-- Main progress photo gallery -->
	<div class="main">
	
	<h2>Progress Photos</h2>
	<hr>
	
	<!-- Portfolio Gallery Grid -->
	<div class="row">
	 <div class="column">
		<div class="content">
		 <img src="/Users/bradich/Desktop/Monthly Project Report Test Files/IMG_0306.jpg"/>
		 <h3>Photo 1 Description</h3>
		</div>
	 </div>
	 <div class="column">
		<div class="content">
		 <img src="/Users/bradich/Desktop/Monthly Project Report Test Files/IMG_0304.jpg"/>
		 <h3>Photo 2 Description</h3>
		</div>
	 </div>
	 <div class="column">
		<div class="content">
		 <img src="/Users/bradich/Desktop/Monthly Project Report Test Files/Photo 3.jpg" max-width="100%"/>
		 <h3>Photo 3 Description long text test. This is a very long description. How does it appear on the grid?</h3>
		</div>
	 </div>
	 <div class="column">
		<div class="content">
		 <img src="/Users/bradich/Desktop/Monthly Project Report Test Files/Photo 4.jpg"/>
		 <h3>Photo 4 Description</h3>
		</div>
	 </div>
	</div>
	
	<!-- END gallery -->
	</div>
</html>

Categories:

Building flows