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
NEWBIE NOTE
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.
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.
CSS
.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;
z-index:1;
}
.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. */
}
BBCode
[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 */ [center][h3]Navigate[/h3][/center] [table][td] [url=#a]A[/url][br] [url=#e]E[/url][br] [url=#i]I[/url][br] [url=#m]M[/url][br] [url=#r]R[/url][br] [url=#v]V[/url][br] [/td] [td] [url=#b]B[/url][br] [url=#f]F[/url][br] [url=#j]J[/url][br] [url=#n]N[/url][br] [url=#s]S[/url][br] [url=#w]W[/url][br] [/td] [td] [url=#c]C[/url][br] [url=#g]G[/url][br] [url=#k]K[/url][br] [url=#o]O[/url][br] [url=#t]T[/url][br] [url=#y]Y[/url][br] [/td] [td] [url=#d]D[/url][br] [url=#h]H[/url][br] [url=#l]L[/url][br] [url=#p]P[/url][br] [url=#u]U[/url][br] [url=#z]Z[/url][br] [/td] [/table] [hr] [small][small][small][small] [url=#top]return to top[/url] [/small][/small][/small][/small] [/container] [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 */ [h3]Navigate[/h3] [table][td][center][url=#a]A[/url] [url=#b]B[/url] [url=#c]C[/url] [url=#d]D[/url] [url=#e]E[/url] [url=#f]F[/url] [url=#g]G[/url] [url=#h]H[/url] [url=#i]I[/url] [url=#j]J[/url] [url=#k]K[/url] [url=#l]L[/url] [url=#m]M[/url] [url=#n]N[/url] [url=#o]O[/url] [url=#p]P[/url] [url=#r]R[/url] [url=#s]S[/url] [url=#t]T[/url] [url=#u]U[/url] [url=#v]V[/url] [url=#w]W[/url] [url=#y]Y[/url] [url=#z]Z[/url] [small][small][small][small][url=#top]Top[/url] [/small][/small][/small][/small][/center][/td][/table]
Reference
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!
