Casper: Show Subscribe button on mobile

For the Casper theme, what’s required to show the Subscribe button in portrait on mobile?

The button shows in the Lyra theme:

…but not in Casper…

…unless the phone is viewing in a landscape orientation:

Hey @ScottSemple :wave:
Try adding this to your site head code injection area:

@media (max-width: 700px) {
    .site-nav-right {
        display: flex;

Let us know how you get on :blush:

Great. Thanks a lot.

Another question: Why would this work when using injection, but not when editing screen.css? I made the same change on line 597 of screen.css, and uploaded the new theme files, but the button won’t display. Using injection though, it works fine…

Casper uses a build script for assets such as CSS and JavaScript, this is so the assets can be compressed before uploading to Ghost. Check out the readme in Casper for more info:

Thanks. In that doc, it says:

Now you can edit /assets/css/ files, which will be compiled to /assets/built/ automatically.

Or is that only for self-hosted Ghost?

It will compile automatically, as long as you have started the build script using the command mentioned in the development docs. If you want to see those style changes in the theme you’ll either need to upload the theme to Ghost, or run a local development version of Ghost: