Click to open network menu
Click to open network menu
Join or Log In
Search
To Top
Smitefire logo

Join the leading SMITE community.
Create and share God Guides and Builds.

Create an MFN Account






Or

MOBAFire WildRiftFire CounterStats DOTAFire HeroesFire VaingloryFire RuneterraFire FarmFriends ForzaFire LostArkFire
Not Updated For Current Season

This guide has not yet been updated for the current season. Please keep this in mind while reading. You can see the most recently updated guides on the browse guides page

x

Vote received! Would you like to let the author know their guide helped you and leave them a message?

Vote Vote
Banner for guides

A Guide to Mobile-Friendly Formatting

4 0 3,536
by Mowen updated December 16, 2020

Smite God:

Build Guide Discussion 1 More Guides
Tap Mouse over an item or ability icon for detailed info

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.

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.

Updating old Columns to Responsive Columns

How to update old [Columns] code with new Responsive code



Original Column Example


From xmysterionz Love, find your mark! Cupid guide

Pros
  1. Easy to play

  2. Great Burst Potential

  3. Decent Cooldowns

  4. Permanent Attack Speed Buff

  5. High Sustain in lane

  6. Has a good escape

  7. Utility God

  8. Very cute and Lovely

  9. Cutest cards of all
    the game
Art by vangel4e via DeviantArt
Cons
  1. Very Squishy

  2. Your healing isn't useful in team fights

  3. Good escape but not great

  4. Mesme effect on ulti is broke by damage

  5. Only 2 damage Skills

  6. Falls at late game

  7. Extremely annoying VP (The Default)

code

Updated Responsive Column Example


Addressing a few things here. First we have to put everything into the new responsive table code. Second, we need to reduce the defined widths of the columns. The total width of guide we have to work with is 724px, so all 3 columns need to add up to less than that if we want them to be on the same row for desktop. I want 5px margin on each side. 3 columns with 2 margins per side, so 5px x 6 = 30px, 724px - 30px = 694px, 694 / 3 = 231.33. I'll make each of my columns 230px.

Pros
  1. Easy to play

  2. Great Burst Potential

  3. Decent Cooldowns

  4. Permanent Attack Speed Buff

  5. High Sustain in lane

  6. Has a good escape

  7. Utility God

  8. Very cute and Lovely

  9. Cutest cards of all
    the game
Art by vangel4e via DeviantArt
Cons
  1. Very Squishy

  2. Your healing isn't useful in team fights

  3. Good escape but not great

  4. Mesme effect on ulti is broke by damage

  5. Only 2 damage Skills

  6. Falls at late game

  7. Extremely annoying VP (The Default)

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!

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 Getsukeii via DeviantArt


code


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



Art by Getsukeii via DeviantArt

code

Leave a Comment

You need to log in before commenting.

Collapse All Comments

1
xmysterionz (72) | December 17, 2020 9:54am
I love when you guys use my guides as examples :3
Loading Comments...
Load More Comments
League of Legends Build Guide Author Mowen
A Guide to Mobile-Friendly Formatting
Up Vote Down Vote
Table of Contents
How to Preview the Mobile Version of your Guide on Desktop
How to Make Responsive Columns
Updating old Columns to Responsive Columns
How to use Alignment Properties in Responsive Columns
Visual Properties for Responsive BBCode
Images - How to Avoid Squashing and Stretching

SmiteFire & Smite

Smite is an online battleground between mythical gods. Players choose from a selection of gods, join session-based arena combat and use custom powers and team tactics against other players and minions. Smite is inspired by Defense of the Ancients (DotA) but instead of being above the action, the third-person camera brings you right into the combat. And, instead of clicking a map, you use WASD to move, dodge, and fight your way through the detailed graphics of SMITE's battlegrounds.

Smite Gods

Arachne Awilix Bakasura Bastet Camazotz Cliodhna Da Ji Fenrir Hun Batz Kali Lancelot Loki Mercury Ne Zha Nemesis Pele Ratatoskr Ravana Serqet Set Susano Thanatos Thor Tsukuyomi
Ares Artio Athena Atlas Bacchus Bake Kujira Cabrakan Cerberus Charon Cthulhu Fafnir Ganesha Geb Jormungandr Khepri Kumbhakarna Kuzenbo Maui Sobek Sylvanus Terra Xing Tian Yemoja Ymir
Ah Muzen Cab Anhur Apollo Artemis Cernunnos Charybdis Chernobog Chiron Cupid Danzaburou Hachiman Heimdallr Hou Yi Ishtar Izanami Jing Wei Martichoras Medusa Neith Nut Rama Skadi Ullr Xbalanque
Achilles Amaterasu Bellona Chaac Cu Chulainn Erlang Shen Gilgamesh Guan Yu Hercules Horus King Arthur Mulan Nike Odin Osiris Shiva Sun Wukong Surtr Tyr Vamana
Agni Ah Puch Anubis Ao Kuang Aphrodite Baba Yaga Baron Samedi Chang'e Chronos Discordia Eset Freya Hades He Bo Hel Hera Ix Chel Janus Kukulkan Maman Brigitte Merlin Morgan Le Fay Nox Nu Wa Olorun Persephone Poseidon Ra Raijin Scylla Sol The Morrigan Thoth Tiamat Vulcan Yu Huang Zeus Zhong Kui
View All Gods

SMITEFire is the place to find the perfect build guide to take your game to the next level. Learn how to play a new god, or fine tune your favorite SMITE gods’s build and strategy.

Copyright © 2019 SMITEFire | All Rights Reserved