Larger logo on Braun theme?

Developer help
1

Ahoy folks,

I’m using Ghost Pro, with the Braun theme installed. I’ve tried contacting the Braun dev for support but it’s been a few days now, so I thought I’d try here.

I’ve been trying to have my logo appear like that on https://virtualgarden.greenspell.org/, which also uses Braun.

The default is for the logo to be in a small circular wrapper to the left of the site title and tagline, as you can see right now on my site rightoturbo.com.

I’m not a dev, so I’ve been working with Gemini to get there – and frankly we get most of the way: it all works fine on desktop view, but the mobile view sees the logo get cropped.

CleanShot 2025-07-15 at 10.49.48@2x
CleanShot 2025-07-15 at 10.49.48@2x1920×951 137 KB

CleanShot 2025-07-15 at 10.50.03@2x
CleanShot 2025-07-15 at 10.50.03@2x1920×917 183 KB

So, for now, I’ve reverted back to the default, using an icon/monogram version of my logo.

Here some points Gemini told me to include in my call for help!

  • Setting a height on .gh-head-logo-wrapper just squashes the theme’s circular mask.
  • Changing the wrapper to a rectangle and setting a smaller height still results in the image being cropped.
  • Changing the height of parent containers like #gh-head to auto breaks the entire page layout.
  • Setting a height on the .gh-head-brand-wrapper (as seen in one of your demos) also does not fix the cropping.

To be clear, I’m perfectly happy to pay a dev to resolve this, if any would like to get in touch.

Many thanks!

2

Easiest and simplest way to do this, without giving you all the tools, is to shrink your bowser to force the mobile width to be displayed, right click the logo, click inspect, and do your changes there. Take the code and place it in CSS Injection with !important.
This will get what you need while in Mobile Display.

3

Yup, this was a very big part of my efforts (the screengrab shows the page in mobile view), but alas nothing I tried worked. Very much at the limit of my abilities — and apparently AI’s too :joy:

4

If this isn’t resolved by tonight, I will try and look at it for you.
I just can’t right now with the computer at work.

5

Thank you, I’d very much appreciate that! :folded_hands:

6

Solved! The dev was away on holiday, haha. He replied today with the code I needed.

For any future Braun users, here it is:

<style>
.gh-head-text-wrapper {
display: none;
}
.gh-head-logo-text {
height: auto;
}
.gh-head-logo-wrapper {
aspect-ratio: unset;
border-radius: 0;
width: 100%;
}
.gh-head-logo-wrapper img {
position: relative;
}

@media (max-width: 767px) {
.gh-head-logo-wrapper {
height: 4.8rem;
}
}
</style>
2 Likes
7

Sorry I couldn’t get back to you. But I’m glad this is solved now!