Difference between revisions of "Template:Layouts/ImagesLeftContentRight/style.css"

From Pathfinder Wiki
(Created page with "#imgLeft-contentRight-container { display: flex; flex-direction: column; } #imgLeft-contentRight-container .images-container { display: flex; flex-direction: column; jus...")
 
Line 12: Line 12:
 
 
 
#imgLeft-contentRight-container .images-container a.image {
 
#imgLeft-contentRight-container .images-container a.image {
margin-bottom: 1em;
+
margin-bottom: .25em;
 
}
 
}
  
 
#imgLeft-contentRight-container .images-container a.image img {
 
#imgLeft-contentRight-container .images-container a.image img {
 
border-radius: 10px;
 
border-radius: 10px;
 +
}
 +
 +
#imgLeft-contentRight-container .image-caption {
 +
text-align: center;
 +
margin-bottom: 1em;
 
}
 
}
  

Revision as of 23:38, 28 February 2021

#imgLeft-contentRight-container {
	display: flex;
	flex-direction: column;
}

#imgLeft-contentRight-container .images-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
	
#imgLeft-contentRight-container .images-container a.image {
	margin-bottom: .25em;
}

#imgLeft-contentRight-container .images-container a.image img {
	border-radius: 10px;
}

#imgLeft-contentRight-container .image-caption {
	text-align: center;
	margin-bottom: 1em;
}

@media (min-width: 992px) {
	#imgLeft-contentRight-container {
		flex-direction: row;
	}
	#imgLeft-contentRight-container .images-container {
		flex: 0 0 25%;
		padding-top: .5em;
		justify-content: flex-start;
	}
	
	#imgLeft-contentRight-container .content-container {
		flex: 0 0 75%;
		padding-left: 1em;
	}
}