Difference between revisions of "Template:Lethbridge/mini-template-css"

 
(22 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.5%; display: inline-block;}
+
.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: 30%; padding: 1em; display: inline-block;}
+
.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 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: 70%;padding: 1em;display: inline-block;}
+
.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) {
−
    .textImage-Text {width: 95%;}
 
 
     .imageText-Text {width: 95%;}
 
     .imageText-Text {width: 95%;}
−
.imageBlock-Block {width: 95%}
+
    .imageText-Image {display: block; margin: 0 auto;}
−
.blockImage-Block {width: 95%}
+
    .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