Casper: Show Subscribe button on mobile

Themes
1

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

The button shows in the Lyra theme:

Screenshot_20200611-102948-Lyra
Screenshot_20200611-102948-Lyra1080×2160 230 KB

…but not in Casper…

Screenshot_20200611-102902-portrait
Screenshot_20200611-102902-portrait1080×2160 253 KB

…unless the phone is viewing in a landscape orientation:

Screenshot_20200611-102913-landscape
Screenshot_20200611-102913-landscape2160×1080 159 KB

2

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

<style>
@media (max-width: 700px) {
    .site-nav-right {
        display: flex;
    }
}
</style>

Let us know how you get on :blush:

3

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…

4

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:

5

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?

6

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: