Difference between revisions of "MediaWiki:Mobile.css"

From Regiapædia
Jump to: navigation, search
Line 63: Line 63:
 
#PinBox{
 
#PinBox{
 
     margin-right:3px;
 
     margin-right:3px;
 +
    Width:170px;
 
}
 
}
  
Line 80: Line 81:
 
#PinterestlikeContent {
 
#PinterestlikeContent {
 
     -moz-column-count: 5;
 
     -moz-column-count: 5;
     -moz-column-gap: 3px;
+
     -moz-column-gap: 1px;
 
     -webkit-column-count: 5;
 
     -webkit-column-count: 5;
     -webkit-column-gap: 3px;
+
     -webkit-column-gap: 1px;
 
     column-count: 5;
 
     column-count: 5;
     column-gap: 3px;
+
     column-gap: 1px;
 
     width: 932px;
 
     width: 932px;
 
  /*border: 1px solid black;*/
 
  /*border: 1px solid black;*/
Line 94: Line 95:
 
     width: 100%;
 
     width: 100%;
 
}
 
}
@media only screen and (max-width : 1420px){
 
    #PinterestlikeContent {
 
        -moz-column-count: 4;
 
        -moz-column-gap: 3px;
 
        -webkit-column-count: 4;
 
        -webkit-column-gap: 3px;
 
        column-count: 4;
 
        column-gap: 3px;
 
        width: 745px;
 
      /*border: 1px solid red;*/
 
    }
 
   
 
    #container {
 
        width: 745px;
 
    }
 
}
 
 
 
@media only screen and (max-width : 1230px){
 
    #PinterestlikeContent {
 
        -moz-column-count: 3;
 
        -moz-column-gap: 3px;
 
        -webkit-column-count: 3;
 
        -webkit-column-gap: 3px;
 
        column-count: 3;
 
        column-gap: 3px;
 
        width: 560px;
 
      /*border: 1px solid blue;*/
 
    }
 
   
 
    #container {
 
        width: 560px;
 
    }
 
}
 
 
@media only screen and (max-width : 1044px){
 
    #PinterestlikeContent {
 
        -moz-column-count: 2;
 
        -moz-column-gap: 3px;
 
        -webkit-column-count: 2;
 
        -webkit-column-gap: 3px;
 
        column-count: 2;
 
        column-gap: 3px;
 
        width: 375px;
 
      /*border: 1px solid orange;*/
 
    }
 
   
 
    #container {
 
        width: 375px;
 
    }
 
}
 
 
@media only screen and (max-width : 820px){
 
    #PinterestlikeContent {
 
        -moz-column-count: 1;
 
        -moz-column-gap: 3px;
 
        -webkit-column-count: 1;
 
        -webkit-column-gap: 3px;
 
        column-count: 1;
 
        column-gap: 3px;
 
        width: 190px;
 
      /*border: 1px solid green;*/
 
    }
 
   
 
    #container {
 
        width: 190px;
 
    }
 
}
 
 
 
[[Category:Wiki]]
 
[[Category:Wiki]]

Revision as of 09:52, 3 July 2017

/* CSS placed here will affect users of the mobile site */
.mobile-float-reset { float: none !important; width: 100% !important; }

/* Hides Desktop only elements */
#mf-HideOnMobile { display: none; }

.header {
	margin-top: 0;
	border-top: none;
        background-color: 	#F0F0F0    !important;
}
input.search {
	background: none !important;
}


/* non-content area */
body.search-overlay {
    background-color: #282828 !important;
    color: white;
}

/* Footer */
div#footer {
  border: none;
  background-color: #282828;
  color: #ffffff;
}

div#footer ul li {
  color: #ffffff;
}

div#footer a {
    color: #ffffff;
}

div#footer a:visited {
    color: #ffffff;
}


/* content area */
#content {
    background: #FFFFD5; 
    color: #000000;
    border: 1px solid #000000;
    border-top: 1px solid #000000;
}

h1, h2, h3, h4, h5, h6 {
    color: #800000; 
    font-weight: bold;
    font-family: sans-serif;
}

/* AO Special Mention Box */
#AOBox {
    width: 100%;
    margin-right:6px;

/* Pin Box Container*/
#PinBox{
    margin-right:3px;
    Width:170px;
}


/* CSS Pinterest Like Gallery for Mediawiki
 * 
 * @author: Unknown
 * current version crafted together by [[User:Christharp]] from several CSS sites. For my website:[http://www.yellpedia.com/wiki/Main_Page Yellpedia]
 */

#container {
    width: 932px;
    margin: 0 auto;
    border: 1px solid red;
}
 
#PinterestlikeContent {
    -moz-column-count: 5;
    -moz-column-gap: 1px;
    -webkit-column-count: 5;
    -webkit-column-gap: 1px;
    column-count: 5;
    column-gap: 1px;
    width: 932px;
 /*border: 1px solid black;*/
}
 
#PinterestlikeContent img{
    display: inline-block;
    margin-bottom: 5px;
    width: 100%;
}
[[Category:Wiki]]