Preamble: Be aware that AO3 loves adding <br> and <p> tags throughout your work. Consider wrapping everything in a <figure> tag to prevent this.

AO3 does not allow us to use Media Queries in Workskins. Yet, by making resourceful use of AO3's built-in stylesheets (and overriding styles as needed), we can still achieve somewhat-responsive design!

AO3 is desktop-first, enabling additional CSS definitions at ≤ 992px and ≤ 672px screen width, respectively.

All our Workskin definitions are prefixed with #workskin, and ID selectors have the highest specificity. Unfortunately this means we cannot make use of any CSS that requires fine-tuning of the responsive property via custom CSS.

But there are still a two things that can be used, which, in turn offer us a greater deal of responsiveness:

Visibility

The most straightforward and most useful of the classes.

Resize your screen to see the different boxes appear/disappear.

Add these classes:

• hidden narrow-shown to the mobile version
• narrow-hidden to the desktop version

So your markup looks e.g. like this:

<div class="hidden narrow-shown">
  <div class="box box-red">
    Mobile Viewport
  </div>
</div>
<div class="narrow-hidden">
  <div class="box box-blue">
    Desktop Viewport
  </div>
</div>

If you have a complex design, you could use this by duplicating your HTML and having separately scoped desktop and mobile versions.

While it's at its core a very basic technique, going through the effort of building two versions can greatly improve the user experience.

Changing Width

Something a bit more specific and niche:

The selector .announcement .thermometer-content will apply width: 80% on mobile screens and width: 50% on desktop. This offers you at least some responsiveness with regards to width; using negative x-margins you can increase the size of the element.

Use this code:

<div class="announcement">
    <div class="thermometer-content">
        80% on Mobile<br>
        50% on Desktop
    </div>
</div>

#workskin .announcement .thermometer-content {
  /* override these two with whatever you need */
  height: auto;
  margin: auto;
}

Conclusion

As always, any questions or critique, just let me know in the comments. And if you build anything based on this, please do drop a link down below!