CSS to increase height of logo and header in dektop <> Mobile view

From my pc desktop, via the inspector in firefox, the css tag that manipulates logo height is:

.d-header .title {
  --d-logo-height: 4em;
}

However, I notice that when I plug in this css tag in the default theme in the css editor under desktop, it does nothing to the logo height as viwed on my pc desktop nor mobile phone.
However, if I plug in the same css code under mobile it changes the logo height not only on my pc dektop but on mobile phone too. Is this a bug in discourse or am i
missing something.

1 Like

Hi,

Just in case, where did you put this CSS?

2 Likes

It’s always good practice to try and frame a request for help a bit better. Lot of people here are super eager to help, but there are so many ways things can be done, that a good explanation is crucial to get help asap :slight_smile:

Also, if you’re testing things locally, don’t forget to append ?mobile_view=1 to the url.

1 Like

From my pc desktop, via the inspector in firefox, the css tag that manipulates logo height is:

.d-header .title {
  --d-logo-height: 4em;
}

However, I notice that when I plug in this css tag in the default theme in the css editor under desktop, it does nothing to the logo height as viwed on my pc desktop nor mobile phone.
However, if I plug in the same css code under mobile it changes the logo height not only on my pc dektop but on mobile phone too. Is this a bug in discourse or am i
missing something.

I tried to recreate what I think you’re doing but I can’t repro this:

It correctly changes mobile, and doesn’t impact desktop.

If I add the this CSS in the editor, it works as expected for desktop:

And for mobile, you only need to set the height for the logo, not for the header:

Hope that helps.

1 Like

Thanks, I jumped on a different machine, one running ubuntu 22.04 (web server) the CSS code in the desktop CSS bucket rendered correctly, so perhaps a Browser issue on my other PC desktop running Windows 7.
I did notice that I appear to be limited in Mobile CSS bucket to:

.d-header #site-logo {
  height: 3em;
}

Any attempt to go beyond 3em doesn’t increase the logo height on my cell phone, GS23 - even after I refresh the cache.

Thoughts?

Yup, try unsetting the max-width on the logo, that should free it from any constraints.

1 Like

Thanks for the input I couldn’t find that option under settings is that done through CSS or a command line input in rails and if so what does that look like

That’d be CSS, like so:

.d-header #site-logo {
  max-width: unset;
}

If that fails, add !important.

3 Likes

Thanks for your help:

For those who come after me and would like to increase their logo size both in desktop and mobile view.

  1. Customize → Themes → Default → Edit CSS/HTML

a) Post in the Desktop bucket:

.d-header {
  height: 5em;
}
.d-header #site-logo {
  height: 5em;
}

b) Post in the Mobile bucket:

.d-header #site-logo {
  max-width: unset;
}
.d-header #site-logo {
  height: 4em;
}
2 Likes

Those could be one rule:

.d-header #site-logo {
  max-width: unset;
  height: 4em;
}

I think you could compact the first rule set as well, but I don’t remember how off the top of my head.

2 Likes

One more thing that would be helpful to add is how to reduce the padding, so as to move logo left in Mobile view - thoughts?

.wrap {
  padding-left: 0;
}

At this point, it might be a good idea to follow an introduction course in CSS because:

More about developing your own themes can be read in the dev category.

2 Likes

Thanks Charlie I appreciate it.
I’m familiar with using inspector, e.g. firefox and deriving some solutions.

Any thoughts why logo resizing is not part of the core functionality within discourse. Branding of any website is critical and the lack of granularity in this respect is surprising.

1 Like

“Logo manipulation” is perfectly possible, just like all other types of styling, within themes and theme components.
You will just either need to learn the basics of html/css/js and go through the plentitude of documentation on meta to get things done yourself, or you’ll need to look for someone you can hire to make your desired changes.

The latter can be done in the marketplace category.

As your original question has been answered, I think we can end this topic now.

I wish you the best of success with your forum.

3 Likes

I personally would not expect a company logo sizing to be a part of a forum platform’s core functionality. Moreover, our software is open source and we do provide such support to help you accomplish this as we did above. We also offer lots of info on learning to develop your own customizations.

3 Likes

Hi Charile,

By “Logo Manipulation” I was referring to the ability to change the size of the logo within the UI."

Thanks for your help.