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.
/**
* A responsive mobile interface for FandomDesktop.
* @author dr03ramos
*/
@media only screen and (max-width: 1023px) {
.sticky-modules-wrapper {
display: flex;
justify-content: space-between;
}
.rail-module__list {
grid-template-columns: unset
}
.rail-module,
.rail-sticky-module,
.mcf-column {
flex-basis: 48%;
width: 48%;
}
.global-navigation__bottom .wds-dropdown {
margin-left: 0;
margin-right: 10px
}
.mcf-column:nth-child(2) {
display: none;
}
.global-navigation__bottom .wds-dropdown__toggle {
width: unset
}
.right-rail-wrapper {
padding: 0
}
.page__main,
.page__right-rail,
.mcf-wrapper {
padding-left: 26px;
padding-right: 26px
}
.page-header__action-button.has-label .wds-icon {
margin-right: 6px !important
}
.page-side-tools__wrapper {
left: -5px
}
}
@media only screen and (max-width: 785px) {
.global-navigation {
height: 66px;
width: 100%;
padding: 0;
position: initial
}
.global-navigation,
.global-navigation__nav,
.global-navigation__bottom {
display: flex;
flex-direction: row
}
.global-navigation__top {
flex-direction: column;
padding: 0;
align-items: center;
}
.global-navigation__links {
display: inline-flex
}
.global-navigation__link,
.global-navigation .wds-dropdown {
margin: 0 8px;
}
a.global-navigation__logo {
display: grid;
}
.global-navigation__logo .wds-icon {
height: 40px;
}
.global-navigation__bottom {
padding: 13px 0 0 0;
bottom: unset!important;
right: 0;
position: static!important;
}
.wds-dropdown.wds-open-to-right:after,
.wds-dropdown.wds-open-to-right:before,
a[data-tracking-label="start-a-wiki"],
.fandom-sticky-header .fandom-community-header__local-navigation,
#WikiaBar {
display: none!important
}
.global-navigation__search {
margin: auto;
}
.global-navigation__logo,
.global-navigation__links {
margin: 0 5px
}
.global-navigation__logo span {
display: none;
}
.main-container {
min-width: unset;
margin-left: 0;
width: 100%
}
.fandom-sticky-header,
.search-modal,
.search-modal:before {
left: 0
}
.fandom-sticky-header__sitename {
display: block;
}
.fandom-sticky-header {
min-width: unset;
}
.global-navigation .notifications {
margin-bottom: 0
}
.mcf-mosaic {
flex-direction: column
}
.rail-module,
.rail-sticky-module,
.sticky-modules-wrapper {
display: block;
width: 100%;
max-width: unset;
}
.mcf-column {
flex-basis: 100%;
width: 100%;
}
.global-navigation .wds-dropdown__content {
top: 66px !important;
right: 12px !important;
left: auto !important;
}
.fandom-community-header__image {
grid-area: a
}
.fandom-community-header__top-container {
grid-area: b
}
.fandom-community-header__local-navigation {
grid-area: c
}
.fandom-community-header__local-navigation .wds-tabs__tab-label {
font-size: 10px;
}
.fandom-community-header {
grid-template-areas: "a" "b" "c";
grid-template-columns: none
}
.community-header-wrapper {
display: block;
margin-top: 12px;
height: auto
}
/* Portable Infoboxes */
.portable-infobox {
float: none;
margin: auto;
clear: both;
width: 87%!important;
}
/* User pages */
#userProfileApp .user-identity-avatar {
margin: auto;
}
#userProfileApp .user-identity-box {
flex-direction: column;
}
#userProfileApp .user-identity-header__attributes {
clear: both;
margin: auto;
}
#userProfileApp .user-identity-header {
flex-direction: column;
}
#userProfileApp .user-identity-header__actions {
text-align: inherit;
margin: auto;
padding: 10px;
}
#userProfileApp .user-profile-navigation {
overflow: auto;
}
#userProfileApp ul.user-identity-stats,
#userProfileApp .user-identity-bio,
#userProfileApp .user-identity-social {
text-align: center;
margin: auto;
}
#userProfileApp .user-identity-header__attributes {
display: flex;
flex-direction: column;
text-align: center;
}
body.skin-fandomdesktop #userProfileApp .user-identity-header__tag {
width: fit-content;
margin: 0.4em auto;
}
/*Sitenotice/Notifs */
.notifications-placeholder {
width: fit-content;
bottom: 1px;
left: unset;
}
.sitenotice {
width: fit-content;
}
}
@media only screen and (max-width: 470px) {
.page-counter,
.global-navigation__links {
display: none
}
.global-navigation {
flex-direction: row;
-webkit-box-orient: horizontal;
box-orient: horizontal
}
.fandom-sticky-header__sitename {
font-size: 14px
}
.fandom-community-header__top-container {
justify-content: space-between
}
.fandom-community-header .fandom-community-header__local-navigation .medium-navigation .wds-dropdown:first-child .wds-tabs__tab-label span {
display: none
}
.fandom-community-header .fandom-community-header__local-navigation .medium-navigation .wds-dropdown:first-child .wds-dropdown__content {
left: 6em
}
.page-header__bottom {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto;
grid-template-areas: "b" "a"
}
.page-header__title-wrapper {
grid-area: a
}
.page-header__title-actions {
grid-area: b
}
.page-header__actions {
justify-content: flex-end
}
.page__main,
.page__right-rail,
.mcf-wrapper {
padding-left: 20px;
padding-right: 20px
}
.page-side-tools__wrapper {
left: 94%
}
.sticky-toc.toc {
right: 48px;
left: unset
}
}