MediaWiki:Mobile.css

From WikiPasokh

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
p br {
	display: none;
}
/* portals */
.mainpage-portals {
	float: right; 
	width: 12.5%;
	margin: 12px auto;
}
.portal-container-2 {
	display: grid; 
	grid-gap: 15px; 
	grid-template-columns: repeat(2, auto);
	grid-template-rows: auto;  
	width: 100%
}
.portal-container-3 {
	display: grid; 
	grid-gap: 15px; 
	grid-template-columns: repeat(3, auto); 
	grid-template-rows: auto;  
	width: 100%
}
.portal-container-4 {
	display: grid; 
	grid-gap: 15px; 
	grid-template-columns: repeat(4, auto); 
	grid-template-rows: auto;  
	width: 100%
}
.portal-container-5 {
	display: grid; 
	grid-gap: 15px; 
	grid-template-columns: repeat(5, auto); 
	grid-template-rows: auto;  
	width: 100%
}
.portal-container-6 {
	display: grid; 
	grid-gap: 15px; 
	grid-template-columns: repeat(6, auto); 
	grid-template-rows: auto;  
	width: 100%
}
.portal-container-7 {
	display: grid; 
	grid-gap: 15px; 
	grid-template-columns: repeat(7, auto); 
	grid-template-rows: auto;  
	width: 100%
}
.portal-column-2-3 {
	grid-column-end: span 2; 
}
.portal-column-3-4 {
	grid-column-end: span 3; 
}
.portal-column-1-2,
.portal-column-1-3,
.portal-column-1-4,
.portal-column-1-5,
.portal-column-1-6,
.portal-column-1-7 {
	grid-column-end: span 1; 
}
.portal-column-2-2 {
	grid-column-end: span 2;
}
.portal-column-3-3 {
	grid-column-end: span 3;
}
.portal-column-4-4 {
	grid-column-end: span 4;
}
.portal-column-5-5 {
	grid-column-end: span 5;
}
.portal-column-6-6 {
	grid-column-end: span 6;
}
.portal-column-7-7 {
	grid-column-end: span 7;
}
@media only screen and (max-width: 700px) {
	.mainpage-portals {
		width: 25%; 
	}
    /* Decouple the columns on narrow screens */
    .portal-container-2,
    .portal-container-3, 
    .portal-container-4, 
    .portal-container-5, 
    .portal-container-6, 
    .portal-container-7 {
		display: block;
	}
    .portal-column-1-2,
    .portal-column-3-4,
    .portal-column-1-3,
    .portal-column-2-3,
    .portal-column-2-2,
    .portal-column-3-3,
	.portal-column-4-4,
	.portal-column-5-5,
	.portal-column-6-6,
	.portal-column-7-7 {
        flo at: inherit;
        width: 100%;
        margin-top: 16px;
        display: block !important;
        text-align: center;
    }
    .portal-column-1-4 {
		wid th: calc(50% - 16px);
    }
    .portal-column-1-6 {
		wid th: calc(33.3% - 16px);
    }
    .portal-column-1-7 {
	flo at: right;
	wid th: calc(25% - 16px);
    }
}
@media only screen and (max-width: 600px) {
    .portal-column-1-4, 
    .portal-column-1-6, 
    .portal-column-1-5 {
        float: inherit;
        width: 100%;
        margin: 0;
        display: block !important;
        text-align: center;
    }
}
/* ثابت کردن منوی بالا */
.header-container.header-chrome {
    position: fixed;
    width: calc(100% - 32px);
    z-index: 1;
}
.page-heading {
    margin-top: 54px;
}
.overlay {
    z-index: 10
}
.header-container.header-chrome.overlay-header-container {
    width: 100%;
}
img {
	max-width: 100%; 
	height: auto !important;
    clip: rect(auto, auto, auto, auto) !important;
}