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.

Thanks for your help: For those who come after me and would like to increase their logo size both in desktop and mobile view. 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; }

Hi, Just in case, where did you put this CSS?

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.

I tried to recreate what I think you’re doing but I can’t repro this: [image] selfaware: However, if plug in the same css code under mobile it changes the logo height not only on my pc dektop but on mobile phone too It correctly changes mobile, and doesn’t impact desktop. If I add the this CSS in the editor, it works as expected for desktop: [image] And for mobile, you only need to set the height for the logo, not for the header: [image] Hope that helps.

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.

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

[image] selfaware: b) Post in the Mobile bucket: .d-header #site-logo { max-width: unset; } .d-header #site-logo { height: 4em; } 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.

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?

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

Development

Firepup650 (Firepup Sixfifty) January 29, 2024, 2:48pm 11

That’d be CSS, like so:

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

If that fails, add !important.

Topic		Replies	Views
Mobile logo in header broken Product Support	14	2018	November 23, 2018
Logo squished in mobile view? Product Support	1	720	October 14, 2022
Header logo is smaller after upgrading to 2.2.0.beta5 Product Support	5	1330	November 30, 2018
Change header and logo size on home page UX	4	3703	August 11, 2020
Any way to change at what width the small logo appears? Development	8	294	July 29, 2026

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

Related topics