The best way to preview your own guide on mobile would be to use the new Mobile Preview button in the guide editor. This will provide a very easy way to see how your guide will look on mobile.

But what if you want to look at another author's guide at mobile size while on your desktop? (Say maybe, this guide!!)

Simply right click somewhere on the screen and hit inspect (or hit F12). This will bring up the developer tools.


Next you just click on the phone/tablet icon in the top left of the developer tools. This will allow you to emulate the screen size of different devices. You can select which device you want to emulate in the very top after you enable this mode. Then when you want to go back to desktop simply click that button again (or just exit inspector).

I would highly recommend toggling this on and off as you read the guide (if you are reading on a desktop) - since then you will be able to see how code that works well on desktop doesn't necessarily do the same on small screen sizes.

Another option is to simply to resize your browser window and make it really thin. This is easier, but you have less control over viewing the window at specific screen resolutions.

If you have any questions, or are having trouble getting the results you want, please leave a comment on this guide! If you're trying to fix something in particular on your guide please include a screenshot and a link to the guide / section you are trying to fix!

This will be your bread and butter if you are wanting to format your guides to look good on both mobile and desktop. It will essentially replace both [columns] and [table] if your columns or tables aren't just one column.

When using the old [columns] code on small screen sizes you will find your text and images will become very narrow to try to fit everything on one row. However, with the new [responsive] columns the individual cells will change how many they show per row depending on the screen width.

Here is what a single row responsive column will look like. It is pretty simple, and similar to [table]. You have to define the container ([responsive]), define the row ([row]), and define how many cells you want with [[col]]. This is a 3 column responsive table:








The main thing to remember here is that the [col]s will only move onto a new row if there is not enough room in the current row. Let's see what happens when we make there be a full paragraph of text in the first column:




You see, the first column is very greedy with its space. Unless you define the width of the column it will just take up as much as it possibly can with the content within it. What if we want a bit more equitable column setup? Here, we will set the width of each [col] to 150px:




On desktop we get 3 evenly spaced columns in 1 row, each column being 150px. On mobile only 2 columns will fit in one row, then the last column is hanging on a second row. On mobile this looks OK, it fills the space, but on desktop it looks a bit odd since it feels like there is a lot of unused room.

A simple solution would be to use the new justify-content property on the [row]. Set justify-content to "space-evenly".




On desktop we now have a much nicer looking setup, and you'll notice on mobile column 3 is now centered, which looks a lot better and makes better use of the space. Auto margins are a simple and easy way to spread out your columns.

Now that we have the basics of responsive columns down, let's look at an example of an old column setup and how we can replicate it in the new responsive column setup.

Here is a practical example of how to use the responsive column bbcode. I see this bbcode format used in a lot of guides (icon on left text on right), so let's look at how we can make it mobile friendly!

We'll be working with an example from Psiguard's The Nocturnomicon guide:

Unspeakable Horror (E): Nocturne's E creates a 465 range tether to the target enemy that deals damage over 2 seconds. If the tether isn't broken before this time, the target is forced to Flee for a short duration. Nocturne also passively gains 335 movement speed towards Fleeing targets. This is Nocturne's only source of crowd control and makes him much harder to 1v1 if the enemy doesn't break the tether.

Now, this looks great on desktop, but you'll see on mobile that the icon gets teeeeeeny tiny. Images will automatically scale down to fit the text if the screen width gets too small (otherwise it would be impossible to read the actual content in a lot of cases).

So let's look at how we can achieve this same look on desktop, but have the icon move to a vertical column setup on mobile!



If we just try to replicate only defining the width of the icon, you'll see what I talked about before with the responsive columns being "greedy". The right column will take up as much space as it can and push the left column with the icon to a different line. We need to figure out how wide the text column should be.

The easiset way to just copy what your existing setup looks like is to once again use the inspector described in the first chapter. Right click -> inspect (or hit F12) and use the selector tool (button with square and arrow). Then you can see the width, height, padding, margin, etc of the object you are inspecting!


So now we know the total desktop width will be 686px, with 10px of padding on each side that means you have to do -20px from the total width and you end up with 666px (oh boy...). Please note I use the max-width property instead of just plain width so that it can be smaller for mobile. This should look exactly the same as the current version on desktop.

Another small note: I've added the align-items="center" property in the [row] to make the different columns vertically aligned with each other. I've also added justify-content="center" property to what makes the columns centered, and therefore centers the icon when it's on its own line. I find this to be a good general setup most of the time! :)

EDIT: We changed the width of the chapters since I took this screenshot so I had to change the max-width to 646 in the code but you get the picture.

To start off, for those who are savvy with CSS the [responsive] bbcode is based off of CSS's Flexbox. If you are comfortable reading CSS documentation you could easily use these resources to learn more:

• W3Schools
• CSS Tricks (I find the visual guides in this one especially helpful for wrapping your head around how the different alignments work)

Now I'll go over all the different properties you can use with your [responsive] column setup to achieve the exact look you are going for!

Justify Content

You can change the horizontal alignment of the columns in a row by using justify-content. The syntax would be [row justify-content="space-evenly"]

Options

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly

Align Items

You can change the vertical alignment of the columns in a row by using align-items. The syntax would be [row align-items="center"]

Options

• flex-start
• flex-end
• center
• stretch
• baseline

Color

Apply this property to change the color of all the text within that col. Can accept shorthand like "red" or hexidecimal values like #050505.

Background-Color

This will let you change the background color to create blocks and help different elements stand out. You can really spice things up with this! (Shorthand is "bgcolor", but "background-color" also works).

Padding and Margin

Control how much space there is around your items by using padding and margin. Padding controls the space between the content of your item and your item's container. Margin controls the space between your item's container and other items.

Border and Border Radius

Border and Border Radius allow you to style the outside of your containers in any number of ways! Here is the basic syntax:

• border="thickness style color" (ex: border="1px solid #555555")
• border-radius=X (where X is a number of pixels)

While squash and stretch may be great for animation students, it isn't so much when your lovely image you've shared becomes unrecognizable and pixelated! Here are some things to avoid in order to prevent this from happening to your images.

Do Not Define the Height of Images

Height of Image is Defined

Height of Image is Not Defined (only Width is Defined)