Difference between revisions of "Template:Lethbridge/mini-template-css"
Keithaiken (Talk | contribs) |
Keithaiken (Talk | contribs) |
||
| (24 intermediate revisions by the same user not shown) | |||
| Line 5: | Line 5: | ||
.twoText-Wrapper {width: 95%; text-align: center;} | .twoText-Wrapper {width: 95%; text-align: center;} | ||
| − | .twoText-Text {width: 45%; padding: 1em; display: inline-block;} | + | .twoText-Text {width: 45%; padding: 1em; display: inline-block; vertical-align: top !important;} |
.twoImage-Wrapper {width: 95%; text-align: center;} | .twoImage-Wrapper {width: 95%; text-align: center;} | ||
| − | .twoImage-Image {width: 47 | + | .twoImage-Image {width: 47%; display: inline-block;} |
.twoImage-Image img {max-width: 100%; padding: 1em; width: 100%;} | .twoImage-Image img {max-width: 100%; padding: 1em; width: 100%;} | ||
.twoText-Wrapper {width: 95%; text-align: center;} | .twoText-Wrapper {width: 95%; text-align: center;} | ||
| − | .twoText-Text {width: | + | .twoText-Text {width: 47%; padding: 1em; display: inline-block;} |
.threeImage-Wrapper {width: 95%; text-align: center;} | .threeImage-Wrapper {width: 95%; text-align: center;} | ||
.threeImage-Image {width: 31.66%; display: inline-block;} | .threeImage-Image {width: 31.66%; display: inline-block;} | ||
.threeImage-Image img {max-width: 100%;padding: 1em; width: 100%;} | .threeImage-Image img {max-width: 100%;padding: 1em; width: 100%;} | ||
| + | |||
| + | .threeText-Wrapper {width: 95%; text-align: center;} | ||
| + | .threeText-Text {width: 30%; padding: 1em; display: inline-block;} | ||
.textBlock-Wrapper {width: 95%; text-align: center;} | .textBlock-Wrapper {width: 95%; text-align: center;} | ||
| Line 35: | Line 38: | ||
.fourImage-Image img {max-width: 100%; padding: 1em;} | .fourImage-Image img {max-width: 100%; padding: 1em;} | ||
| − | .textImage-Wrapper {width: 95%;} | + | .textImage-Wrapper {width: 95%; margin: 0 auto;} |
.textImage-Text {width: 45%; padding: 1em; float: left;} | .textImage-Text {width: 45%; padding: 1em; float: left;} | ||
.textImage-Image {width: 45%; padding: 1em; float: left;} | .textImage-Image {width: 45%; padding: 1em; float: left;} | ||
| Line 60: | Line 63: | ||
.imageBlock-Wrapper {width: 95%;text-align: center;} | .imageBlock-Wrapper {width: 95%;text-align: center;} | ||
.imageBlock-Block {width: 45%;padding: 1em;display: inline-block;} | .imageBlock-Block {width: 45%;padding: 1em;display: inline-block;} | ||
| − | .imageBlock-Image {width: 45%;padding: 1em;display: inline-block;} | + | .imageBlock-Image {width: 45%;padding: 1em;display: inline-block; vertical-align: top !important} |
| − | .imageBlock-Image img {max-width: 100%;} | + | .imageBlock-Image img {max-width: 100%; vertical-align: top !important} |
.imageBlock-Block blockquote {background-color: rgba(171,171,171,0.4);border:solid;border-color: rgba(21,27,31,0.8);border-width: medium;border-radius: 5px;} | .imageBlock-Block blockquote {background-color: rgba(171,171,171,0.4);border:solid;border-color: rgba(21,27,31,0.8);border-width: medium;border-radius: 5px;} | ||
blockquote p {padding-left: 1em;padding-right: 1em;} | blockquote p {padding-left: 1em;padding-right: 1em;} | ||
.oneBlock-Wrapper {width: 95%;text-align: center;} | .oneBlock-Wrapper {width: 95%;text-align: center;} | ||
| − | .oneBlock-Block {width: | + | .oneBlock-Block {width: 80%;padding: 1em;display: inline-block;} |
.oneBlock-Block blockquote {background-color: rgba(171,171,171,0.4);border:solid;border-color: rgba(21,27,31,0.8);border-width: medium;border-radius: 5px;} | .oneBlock-Block blockquote {background-color: rgba(171,171,171,0.4);border:solid;border-color: rgba(21,27,31,0.8);border-width: medium;border-radius: 5px;} | ||
.oneBlock-Block blockquote p {padding: 1em;} | .oneBlock-Block blockquote p {padding: 1em;} | ||
| + | |||
| + | @media screen and (max-width: 800px) { | ||
| + | .imageBlock-Image {width: 95%} | ||
| + | .imageBlock-Block {width: 95%} | ||
| + | } | ||
@media screen and (max-width: 716px) { | @media screen and (max-width: 716px) { | ||
.textImage-Text {width: 95%} | .textImage-Text {width: 95%} | ||
.textImage-Image {width: 95%} | .textImage-Image {width: 95%} | ||
| + | .twoImage-Image {width: 95%} | ||
| + | .twoText-Text {width: 95%} | ||
| + | .blockText-Text {width: 95%} | ||
| + | .content video {width: 95%} | ||
| + | |||
} | } | ||
@media screen and (max-width: 594px) { | @media screen and (max-width: 594px) { | ||
| − | |||
.imageText-Text {width: 95%;} | .imageText-Text {width: 95%;} | ||
| − | + | .imageText-Image {display: block; margin: 0 auto;} | |
| − | + | .imageBlock-Block {width: 95%} | |
| + | .blockImage-Block {width: 95%} | ||
| + | .blockText-Block {width: 95%} | ||
} | } | ||
</style> | </style> | ||
</html> | </html> | ||
Latest revision as of 02:54, 18 October 2018