User:Lakelimbo/Grids
As you might already know, Bulbapedia has a very poor UX on mobile, caused by the way the templates are made and aligned. On this page I will try to see if I can make some things responsive. I will add more things to this page soon.
Note that the Mobile view (MinervaNeue) has a lot of workarounds in the CSS that sometimes break certain things, so if you want to visualize better the effect of the responsive grids, I recommend using the Vector skin and just resize the page to be more vertical, delete the #mw-panel and add margin-left: 0!important to .mw-body.
Side-by-side elements
Pseudo-legendary Pokémon
"Tutorial"
Instead of a table inside a table, take each Pokémon panel and wrap around a div, then wrap all the div with another div. In the "master" div, insert the following CSS:
{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, auto));
gap: .5rem;
place-content: center
}
Also, remove the margin: auto from the Pokémon tables, place-content: center takes care of that automatically. IMO, it's also preferable to give each table width: 100%.
Red Gyarados
Using this page as an example with the same previous method.
Multiple panels
This one uses multiple tables because Template:ActivePoké and Template:InactivePoké are just cells for tables. Now, instead of a table with multiple cells, each panel (ActivePoké or InactivePoké) has its own table with a single cell. Using Wild Area as an example:
 Braviary |
 Maractus |
 Wooloo |
 Ribombee |
 Grubbin |
 Phantump |
 Seedot |
 Goomy |
 Hippopotas |
 Tympole |
 Frillish |
 Flygon |
 Snorlax ↔ Gigantamax Snorlax |
 Rookidee |
 Budew |
 Butterfree |
 Joltik |
Ditto |
Caught Pokémon:
Code
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, auto));">
{|
|{{ActivePoké|Wild Area|Braviary|Wild Area Braviary.png|Normal|Flying|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Maractus|Wild Area Maractus.png|Grass|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Wooloo|Wild Area Wooloo.png|Normal|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Ribombee|Wooloo anime.png|Bug|Fairy|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Grubbin|Wild Area Grubbin.png|Bug|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Phantump|Wild Area Phantump.png|Ghost|Grass|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Seedot|Wild Area Seedot.png|Grass|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Goomy|Wild Area Goomy.png|Dragon|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Hippopotas|Wild Area Hippopotas.png|Ground|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Tympole|Wild Area Tympole.png|Water|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Frillish|Wild Area Frillish.png|Water|Ghost|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Flygon|Wild Area Flygon.png|Ground|Dragon|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Snorlax|Wild Area Snorlax.png|Normal|nick=Snorlax ↔ Gigantamax Snorlax|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Rookidee|Wild Area Rookidee.png|Flying|nick=Rookidee|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Budew|Wild Area Budew.png|Grass|Poison|nick=Budew|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Butterfree|Wild Area Maractus Butterfree.png|Bug|Flying|nick=Butterfree|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Joltik|Wild Area Joltik Ditto.png|Bug|Electric|nick=Joltik|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Ditto|Wild Area Joltik Ditto.png|Normal|nick=Ditto|link=no}}
|}
</div>
Caught Pokémon:
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, auto));">
{|
|{{InactivePoké|Goh|Scorbunny|Goh Scorbunny.png|fire|link=Goh's Cinderace}}
|}
{|
|{{InactivePoké|Goh|Boldore|Goh Boldore.png|Rock|link=List of Goh's Pokémon#Boldore}}
|}
{|
|{{InactivePoké|Ash|Dracovish|Ash Dracovish.png|Water|Dragon}}
|}
{|
|{{InactivePoké|Goh|Arctozolt|Goh Arctozolt.png|Electric|Ice|link=List of Goh's Pokémon#Arctozolt}}
|}
Headers/sections
It's also possible to make multiple sections side-by-side. Section 5 span 2 columns.
This is very useful for a lot of elements, but for sections (unless it's only 2 sections), it will need a media query.
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Section 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Section 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Code
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(33%, auto))"> <div> ==== Section 1 ==== Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> <div> ==== Section 2 ==== Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> <div> ==== Section 3 ==== Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> <div> ==== Section 4 ==== Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> <div style="grid-column: span 2"> ==== Section 5 ==== Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> </div>
Media Queries
Media Queries are very useful and I use it a lot on my projects. On my personal wiki, I modified one based on Bootstrap and imported to the Common.css. Well, in one hand it's very useful, it makes extremly easy to create almost any type of layout and I don't have to worry about inserting a specific display for each element, but in the other, the CSS will be very large, but I don't think it would cause any slowdowns.
@media screen and (min-width: 768px) {
.element {
...
}
}
My recommended media queries:
| Smaller | Small | Medium | Large | Larger | |
|---|---|---|---|---|---|
| Size | <576px | ≥576px | ≥768px | ≥992px | ≥1200px |
Responsive tables
Tables are a bit complicated to adapt, because sometimes they have a lot of content and that's not good for mobile, but the content can't be removed, obviously. One efficient workaround I like is creating an element with overflow-x: auto and width: 100%, so you can place the table inside and it works for any screen size. Resize the screen and see:
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
So, if you need two "responsive" tables side-by-side, you can just wrap the tables in a div with this styling and then wrap everything in a grid.
Moveanime template
Someone on Discord always complained about this template, so I decided to re-create here, using the grids. The only "problem" is the width of the panel, because it would need a media query to be smaller on larger screens. I also turned the text into black because I always thought it was a bit hard to read with the Type color light text color.
Dugtrio
Heliolisk
Mudsdale
| Pokémon | Method | |
|---|---|---|
| User | First used in | Notes |
 Heliolisk
|
Heliolisk stomps down on the ground and creates a shock wave on the ground. The shock wave then crashes towards the opponent. | |
| Clemont's Heliolisk | Clemont's Got a Secret! | Debut |
 Mudsdale
|
Mudsdale's body becomes surrounded in an orange aura and it stands on its hind legs. It them stomps its front two feet on the ground and creates an orange ring of aura pulsating from where it stomped, causing the ground to shake. | |
| Hapu's Mudsdale | A Grand Debut! | None |
 Dugtrio
|
Dugtrio causes the ground to shake. | |
| Endo's Dugtrio | JN052 | None |
