Editing Template:Multiple image/styles.css
Appearance
The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.
Latest revision | Your text | ||
Line 1: | Line 1: | ||
/* | /* {{pp-template}} */ | ||
/* this is a block */ | |||
.multiimageinner { | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
.trow { | |||
display: flex; | |||
flex-direction: row; | |||
clear: left; | |||
flex-wrap: wrap; | |||
width: 100%; | |||
box-sizing: border-box; | |||
} | |||
/* this is a cell */ | |||
.tsingle { | |||
margin: 1px; | |||
float: left; | |||
} | |||
.theader { | |||
clear: both; | |||
font-weight: bold; | |||
text-align: center; | |||
align-self: center; | |||
background-color: transparent; | |||
width: 100%; | |||
} | |||
.thumbcaption { | |||
background-color: transparent; | |||
} | |||
.text-align-left { | |||
text-align: left; | |||
} | |||
.text-align-right { | |||
text-align: right; | |||
} | |||
.text-align-center { | |||
text-align: center; | |||
} | |||
@media all and ( max-width: 720px ) { | |||
.thumbinner { | |||
/* not !important usage can be removed when these are no longer inline styles | |||
inside Template:Multiple image and media query using min-width is introduced */ | |||
width: 100% !important; | |||
box-sizing: border-box; | |||
max-width: none !important; | |||
align-items: center; | |||
} | |||
.trow { | |||
justify-content: center; | |||
} | |||
.tsingle { | |||
/* not !important usage can be removed when these are no longer inline styles | |||
inside Template:Multiple image and media query using min-width is introduced */ | |||
float: none !important; | |||
max-width: 100% !important; | |||
box-sizing: border-box; | |||
text-align: center; | |||
} | |||
.tsingle .thumbcaption { | |||
text-align: left; | |||
} | |||
.trow > .thumbcaption { | |||
text-align: center; | |||
} | |||
} |