MediaWiki:Mobile.css
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.
/* CSS placed here will affect users of the mobile site */ /* ############################################### */ /* HeroBox */ /* ############################################### */ .herobox_border { width: calc(100% - 40px); background-image: url(images/7/7e/Hero_Border_-_Top_Left.png), url(images/0/0f/Hero_Border_-_Top.png), url(images/c/cb/Hero_Border_-_Top_Right.png), url(images/0/00/Hero_Border_-_Right.png), url(images/7/7e/Hero_Border_-_Bottom_Right.png), url(images/6/64/Hero_Border_-_Bottom.png), url(images/8/81/Hero_Border_-_Bottom_Left.png), url(images/f/fb/Hero_Border_-_Left.png); background-position: 0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%; background-size: 40px 40px, calc(100% - 80px) 40px, 40px 40px, 40px calc(100% - 80px), 40px 40px, calc(100% - 80px) 40px, 40px 40px, 40px calc(100% - 80px); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; padding: 20px; } .herobox_content { background-image: url(images/7/7e/Hero_Border_-_Top_Left.png), url(images/0/0f/Hero_Border_-_Top.png), url(images/c/cb/Hero_Border_-_Top_Right.png), url(images/0/00/Hero_Border_-_Right.png), url(images/7/7e/Hero_Border_-_Bottom_Right.png), url(images/6/64/Hero_Border_-_Bottom.png), url(images/8/81/Hero_Border_-_Bottom_Left.png), url(images/f/fb/Hero_Border_-_Left.png); background-position: -20px -20px, 50% -20px, calc(100% + 20px) -20px, calc(100% + 20px) 50%, calc(100% + 20px) calc(100% + 20px), 50% calc(100% + 20px), -20px calc(100% + 20px), -20px 50%; background-size: 40px 40px, calc(100% - 40px) 40px, 40px 40px, 40px calc(100% - 40px), 40px 40px, calc(100% - 40px) 40px, 40px 40px, 40px calc(100% - 40px); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; padding: 10px 15px 10px 15px; } .herobox_flexcontainer { width: 100%; text-align: center; overflow: hidden; display: flex; flex-wrap: wrap; border-width: 0px; } .herobox_image { width: 100%; max-width: 256px; height: auto; margin: auto; } .herobox_ability { border: 30px solid transparent; margin:10px auto 0px auto; border-image: url(images/1/19/Herobox_Ability.png) 65 70 stretch; background-color: transparent; align-self: flex-start; max-width: 470px; } @media all and (min-width: 900px) { /* We tell both sidebars to share a row */ .herobox_flexcontainer { flex-wrap: nowrap; } }