Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:CardPages/styles.css: Difference between revisions

Template page
No edit summary
No edit summary
Line 1: Line 1:
.main-container {
.main-banner {  
  width: 25%;
position: relative;
  height: 200px;
width: 25%;  
  float: right;
height: 200px;  
  margin: 20px 0;
float: right;  
  border: 2px solid #910c0c;
margin: 20px 0;  
 
border: 2px solid #910c0c;  
  display: flex;            /* establish flex context */
}
.main-overlay {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;            /* lock to banner height */
  padding: 10px;
  box-sizing: border-box;
  border: 4px solid #0c2f91;
}
 
.element-item {
  flex: 1;                  /* equal vertical height */
  margin: 5px 0;
  background: #F54927;
  cursor: pointer;
 
  display: flex;
  align-items: center;
  justify-content: center;
}
}
.main-overlay {
position: absolute;
display: flex;
flex-wrap: wrap;
flex-direction: column;
border: 4px solid #0c2f91;
padding: 10px;
z-index: 1;
}
.element-item {
flex: 1;
text-align: center;
padding: 0 4px; background: #F54927;
cursor: pointer;
margin: 5px;
height: 100%;
}
.element-item img {
width: 100%;
height: 28.5px;


.element-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
}

Revision as of 23:12, 22 January 2026

.main-banner { 
	position: relative; 
	width: 25%; 
	height: 200px; 
	float: right; 
	margin: 20px 0; 
	border: 2px solid #910c0c; 
}
.main-overlay { 
	position: absolute; 
	display: flex; 
	flex-wrap: wrap; 
	flex-direction: column; 
	border: 4px solid #0c2f91; 
	padding: 10px; 
	z-index: 1;
} 
.element-item { 
	flex: 1; 
	text-align: center; 
	padding: 0 4px; background: #F54927; 
	cursor: pointer; 
	margin: 5px; 
	height: 100%; 
} 
.element-item img { 
	width: 100%; 
	height: 28.5px; 

}