MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
 /* CSS placed here will be applied to all skins */
-body.page-Main_Page h1.firstHeading { display:none; }
-/* Buy Button */
-.buy-button {
+/* This makes the infobox above the content on Mobile only */
-    width: 100px;
+/* Mobile-specific infobox styling - only applies on small screens */
-     height: 50px;
+@media only screen and (max-width: 768px) {
-     background-color: #4CAF50; /* Green */
+  .infobox {
-     border: none;
+     float: none !important;
-     color: white;
+     display: block !important;
-     text-align: center;
+     width: 100% !important;
-     text-decoration: none;
+     margin: 0 0 15px 0 !important;
-     display: inline-block;
+     box-sizing: border-box;
-     font-size: 16px;
+  }
-    margin: 4px 2px;
-     cursor: pointer;
+  /* Optional: If you want a bit of margin on the sides */
-    transition-duration: 0.4s;
+  .infobox {
+     margin-left: auto !important;
+     margin-right: auto !important;
+     max-width: 95% !important;
+  }
+  /* Ensure infobox appears before the first paragraph */
+  #bodyContent > p:first-of-type {
+     clear: both;
+  }
 }
+/* End of this makes the infobox above the content on Mobile only */
-.buy-button:hover {
-    background-color: #45a049;
-}
-.buy-button a.external {
+body.page-Main_Page h1.firstHeading { display:none; }
-    background-image: none!important;
-}
 .XinReality1 {
@@ Line 241: / Line 246: @@
 background-repeat: no-repeat!important;
 }
+/* display mobile or desktop */
+/* used by the front page start*/
+/* Default styles for desktop (769px or more) */
+.desktop-view {
+    display: block;
+}
+.mobile-view {
+    display: none;
+}
+@media only screen and (max-width: 768px) {
+  .desktop-view { display: none !important; }
+  .mobile-view { display: block !important; }
+}
+/* used by the front page end*/