WA is built on Bootstrap, which handles responsive displays nicely for different sized screens.  Problems sometimes arise with our custom CSS on these screen sizes. For example my Floating Vocab Jump Menu doesn’t play well when viewed on a phone.

Since you’re along for the ride in my learning adventure, shall we use the Pokémon evolution stone called ‘@media’ on my old Floating Vocab Jump Menu?  What we’ll do is display the original menu on a large screen and an alternate on a small screen.   Afterward you should have the basics to get started using ‘@media’ for your own tweaks and items.    

What you’ll need:

  • BBCode for the two menus
  • CSS to switch between the regular Vocab Jump menu and the one designed for smaller screens


If you’re a CSS newbie – this tutorial might be a bit advanced. Make sure to go through the Floating Vocab Jump Menu first and read up on terms that are new.


Our example:

For big screens (in this case greater than or equal to 1024 pixels wide for iPad landscape mode or bigger), we’ll use the regular Vocab Jump Menu.

Vocab Jump Menu for large screens

For screens smaller than that we’ll use a modified one that hovers over my title bar at the top of the screen – out of people’s way.

Vocab Jump Menu for small screens


.side-box-vocab {/* .side-box-vocab 
the container we'll use on large screens. 
Notes and detailed explanations can be 
found in the Floating Vocab Jump Menu tutorial. 
(link at the beginning of this tutorial post) */
   opacity: 0.9; 
   border-radius: var(--box-radius) ; 
   width: 250px;
   top: 130px; 
   right: 20px; 
   padding: 10px;
   border: 3px RGBA(10, 10, 10, 0.3)solid;
   background: #222; 
   position: fixed; 

.top-box-vocab {/*.top-box-vocab
the container we'll use for small screens */
  width: 450px;/* how wide to make the box */
  position: fixed;/* makes the box stay in the 
same place, even when we scroll  */
  top: 2px;/* space between the top of the 
screen and the box (aesthetics)  */
  right: 5px;/* space between the right of 
the screen and the box (aesthetics) */
  background: #222;/* background color to 
match the vocab menu box for bigger screens */
  opacity: .9;/* make it semi-transparent to 
match the vocab menu box for bigger screens */
  text-align: center;/* center the text in
 the box  */
  display: block;/* More info here: 
https://www.w3schools.com/cssref/pr_class_display.asp */
  z-index:2002; /* Make sure it 
shows on top of other elements. 
https://www.w3schools.com/cssref/pr_pos_z-index.asp  */
  border-radius: 10px; /* round the corners of the box */
border: 2px RGBA(10, 10, 10, 0.3)solid; 
/* coordinate the border with the 
vocab menu box for bigger screens */
.top-box-vocab .table td {/* the table the 
menu shows up in didn't round the 
corners. So we fix that here.*/
  border-radius: 0 0 10px 10px;
/* round the bottom corners of the table. More info here:
https://www.w3schools.com/cssref/css3_pr_border-radius.asp */

/* **NOTE** we use a second set of { } 
brackets to hold groups of CSS code 
for the media specification */
@media only screen and (min-width: 1024px) { 
/* show the floating one on a big screen - ipad or bigger */
    .top-box-vocab { display:none; }
/* don't display the one for small screens. 
** if you're using the visibility toggler, add !important ** */
    .side-box-vocab { display: block; }
/* display the one for large screens (see note 
above on display: block;) */

@media only screen and (max-width: 1023px) {
/* show the alternate one on a small screen  */ 
    .side-box-vocab { display:none; }
/* ** if you're using the visibility toggler, add !important ** */
    .top-box-vocab { display:block; }
.user-css .top-box-vocab .table { margin-bottom: 0; }
/* get rid of the margin space at the 
bottom that is automatically put in for 
tables. Just takes up real estate in this 
case. Most other cases it's nice to have. */


[container:side-box-vocab] /* side-box-vocab  the box on the side 
for larger screens set up in a 4 column table 
with a link to the top below the table */
[url=#top]return to top[/url]
[container: top-box-vocab]/* top-box-vocab  
a single row table hovering over my custom 
menu bar with a link to the top after the letters  */


See CSS @media Rule for more info on @media.


Other Uses

Playing with ‘@media’ has been helpful for me in the following:

    • To change the background color on Liminal Chronicles for small screens. The dark background didn’t play well on my friend’s phone. For some reason the article background graphic I have won’t show up for her. I don’t want my dark text unreadable on her screen with the dark background. The solution – change the background color to a light one for small screens. I get to keep my dark background for my viewing, and she can read it on her small screen.
    • To change the text size in the header bar at the top of my worlds so it takes less space on smaller screens.

There are so many ways this functionality can be used. Let your imagination go wild.


Coming Soon

Tips and tricks for making themes for your world!

Make Your World Look Awesome!

Let us know how you use these containers. We’d love to see your creations posted in the WA Discord #guild-showcase.

Until next time, my fellow Tinkersmiths!