My child, it's time to learn how to make your site more mobile-compatible. Do not be afraid. I will guide you.

Open your stylesheet (/style.css) and size #quotebox to look how you want it to appear on desktop.

Now, add this to the bottom of your stylesheet:

You now have a section in your stylesheet that modifies how certain class and id elements appear on any viewport smaller than 600px wide (i.e. mobile view). Yay!!! Start copying more of your element tags in this area and play around with their sizes on mobile!

Yes, I know phone pixel widths these days are a lot more than 600px --look up the difference between actual dimensions and viewport dimensions.

The copy-and-paste code above has width:40%; but you can change this number. Width as a percentage is great because the box height changes automatically based on text length.

For very wide or narrow containers, you can change this width percentage to anything you think looks best.

My homepage, for example, has a very narrow center column, so my QuoteBox is set to 80% width.

I recommend against setting the dimensions in pixels, such as width: 200px; and height: 100px; because it won't scale if someone adjusts the window size or views on a larger or smaller monitor.

Check out the previous troubleshoot thingy for information on making your RQB look good in any size window including mobile view!

Please make sure your Javascript file is referenced by the correct, exact name in the box HTML.

If the .js file is in a folder, make sure it's referenced with the full path, such as:

/foldername/quote.js

Open the .js file and copy an entire row from quote[?] all the way to the semicolon ;.

Paste this on a new line.

Change the number within the brackets of quote[?] to be one more than the previous one.

You should have a neat column of increasing numbers, starting from ZERO. Should look like: quote[0], quote[1], quote[2]... and so on.

At the bottom of the .js file you'll see a phrase like Math.floor(4*Math.random()).

Every time you add a quote entry, you must update this number. It must always be one more than the final, highest entry number on the list.

Let's say you have 20 quotes, and you want to delete quote[12]. You can't really 'just delete' that row.

At time of writing this, the best way to remove an unwanted quote (other than the very last one, which is easily deleted), is to replace the quote text with something else. Duplicate the one before it if you can't think of a good one on the spot.

If you simply deleted the last entry, make sure you lowered the number in the 'Math' section by one.

Next section explains why.

When it comes to computers, if you have a list like this: 0, 1, 2, 3 --what you really have is a list of four numbers. Likewise a list from 0 to 6 is 7 numbers.

Long story short, it's because the list starts with 0 (it has to), and the Math at the bottom of the script goes by how many entries there are.

As u/Codebender explained in this Reddit comment:

"The first entry is zero away from the beginning of the array, the second entry is one away."

These special characters are fine: !@#$%^&*()-+[]'

Double quotes " will break the script unless you put a backslash first, like this:

\"

For this same reason, do not end a Quote with a backslash \ that touches the ending double quotes.

Backslash has a special meaning in Javascript and it will 'comment out' the closing double quotes if you end a Quote entry with \".

You should only include \" in a Quote if you are intending to make " appear within a random quote on your page.

I recommend just sticking with single quotes ' to avoid any issues.

Add this under .refresh in the CSS style:

padding-left: 10px; ← change number to desired distance

Add this under .source in the CSS style:

padding-right: 10px; ← change number to desired distance

In the CSS style under .refresh and .source you'll see:

float: left; and float: right; ← switch these around.