Difference between revisions of "MediaWiki:Mobile.css"
From Regiapædia
Line 55: | Line 55: | ||
} | } | ||
+ | /* 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: 3px; | ||
+ | -webkit-column-count: 5; | ||
+ | -webkit-column-gap: 3px; | ||
+ | column-count: 5; | ||
+ | column-gap: 3px; | ||
+ | width: 932px; | ||
+ | /*border: 1px solid black;*/ | ||
+ | } | ||
+ | |||
+ | #PinterestlikeContent img{ | ||
+ | display: inline-block; | ||
+ | margin-bottom: 5px; | ||
+ | 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 19:51, 27 June 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; } /* 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: 3px; -webkit-column-count: 5; -webkit-column-gap: 3px; column-count: 5; column-gap: 3px; width: 932px; /*border: 1px solid black;*/ } #PinterestlikeContent img{ display: inline-block; margin-bottom: 5px; 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]]