Casper: Make banner follow you on every page? Also get rid of responsive-ready text?

Themes
1

So, I am a total noob looking to do code injection to tweak Casper. My head banner is going to be rather nice, and I want it to follow the user around on every page, not just the home page. I don’t want to use a smaller banner on sub pages. Any code injection for this?

Also, I want to either nix or modify the responsive-ready text of the site title and sub header. On desktop it looks fine but om mobile, the text gets so big that it obscures the banner (and the banner also gets partially cut off). Any tips for that?

2

Just to kind of clarify regarding the responsive image thing, my site is below. On smaller mobile phones it cuts off the banner. Any tips would be appreciated.

3

To get it to not cut off the banner, you’d need to set object-fit to contain, not cover.

You could certainly cause the text to not appear. Take a look at media queries to set that text (the tags for which you can find by inspecting the page) to display: none when the screen gets small.

You could get the banner to show on every page pretty easily by editing the theme. It could also be done with code injection of some javascript - a good start would be comparing the other pages and the home page and figuring out what you’d need to change in that header section.

4

Thanks, once again!
Turning off the text was an easy fix. I added the text into the image itself (but I may change my mind on that later).

So, I used the following to try object-fit as contain, not cover. This makes it display on all pages, and show well on mobile phones, but with two new issues:
One is the strange “gap” underneath the image. The other is that the text is showing up

img {
  width: 1226px;
  height: 560px;
  object-fit: contain;
}
<img src="https://theo-logicaldebris.ghost.io/content/images/size/w2000/2022/11/test_probablydelete-3.png"/>

Any pointers for getting rid of the string of code and the gap?
If this is something that is asked frequently, I apologize and will try to search the forums more before asking.

(Edit: I should note that I am only on starter tier and cannot upload custom themes, so I have to do this with Code Injection. I mistakenly upgraded before my trial was up and lost custom theme privileges early).

5

Well, actually after goofing around a bit more, I kind of arrived at a simple fix.
It will have to do until I become more experienced with this.

<img src="https://theo-logicaldebris.ghost.io/content/images/size/w2000/2022/11/test_probablydelete-3.png"/>
<style>
  /* need to hide original viewport */
  .site-header-content { display: none; }
</style>