Click to open network menu
Join or Log In
Mobafire logo

Join the leading League of Legends community. Create and share Champion Guides and Builds.

Create an MFN Account






Or

A Guide to Mobile-Friendly Formatting

A Guide to Mobile-Friendly Formatting

A Guide to Mobile-Friendly Formatting

Updated on June 2, 2021
8.5
8
Votes
0
Vote Vote
League of Legends Build Guide Author Mowen Build Guide By Mowen 8 0 1,317 Views 6 Comments
8 0 1,317 Views 6 Comments League of Legends Build Guide Author Mowen Build Guide By Mowen Updated on June 2, 2021
x
Did this guide help you? If so please give them a vote or leave a comment. You can even win prizes by doing so!
Vote
Comment

You must be logged in to comment. Please login or register.

I liked this Guide
I didn't like this Guide
Commenting is required to vote!
Would you like to add a comment to your vote?

Thank You!

Your votes and comments encourage our guide authors to continue
creating helpful guides for the League of Legends community.

Champion Build Guide

A Guide to Mobile-Friendly Formatting

By Mowen
How to Preview the Mobile Version of your Guide on Desktop
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!
How to Make Responsive Columns
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:

Column 1
Column 2
Column 3

Code:
[responsive] [row] [col]Column 1[/col] [col]Column 2[/col] [col]Column 3[/col] [/row] [/responsive]

Column 1
Column 2
Column 3

code

(Here is an example with bgcolor, margins, padding, and a border so it's easier to see)



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:

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.
Column 2
Column 3

code


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:

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.
Column 2
Column 3

code


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".

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.
Column 2
Column 3

code


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.
Responsive Columns Example
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.[/color]

code

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!

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.

code

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.

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.

code
How to use Alignment Properties in Responsive Columns
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
Visual Properties for Responsive BBCode

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.

example


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).

example


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.

example


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)
border styles

example
Images - How to Avoid Squashing and Stretching
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




Art by Jessica Oyhenart via ArtStation

code

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




Art by Jessica Oyhenart via ArtStation

code
Mobafire

General Guides

League of Legends

More Guides

The Charts


Featured

30 Days

All Time

Popular
Top Guide by Champion

League of Legends Champions:

Teamfight Tactics Guide