Can’t edit logo and header height and width on mobile site

Hi Sarah,

You’re adding styles that you really don’t need to. By default your theme should already take care of this but you have some added heights of zero and too many styles on this.

View post on imgur.com

I’d take these out, anything you’ve done to get this to work right. Make sure that you are using a media query targeted at mobile devices. Like so

@media screen and (max-width:786px){
  #kad-mobile-banner-sticky-wrapper  {  /*example selector*/
    height:80px !important;   /*example if height is needed*/
    padding:1em 0em !important;  /*example if padding is need*/
   
 }
}

Let me know what’s wrong with the default look and I’ll help you get it straightened out the correct way.

• This reply was modified 5 years, 6 months ago by Stef.
• This reply was modified 5 years, 6 months ago by Stef.

Hi Stef,

Firstly, I’ll apologise as technically we’re not skilled with the site. I’m not aware how we have added heights of zero, we’ve just edited the header with the options on the appearance customisation editor.

Where do we enter in the script you’ve sent, on the theme editor? Thanks for your patience.

No need to apologize. My cssis just an example. However, you may want to look for the underlying culprit which I saw in console that showed several lines of unneeded styles.

They appear to be either set dynamically in the theme or in additional css which can be found by going to appearance > customize > additional css

How can I find the code in the css? I looked in the theme editor but wasn’t sure what section it would be in.

The only addition CSS I have added for layout is one line suggested by Kadence themes to automatically adjust the header height. Shall I take it out?

Here’s how we so called pros troubleshoot things like CSS and JS and a whole bunch of other things with websites and what have you. Watch this video and it will give you the tools you need to learn what we do.

As far as I can see there are some additional styles attached to that header that are conflicting with whatever the developer of the theme had. They appear to be either in settings of the theme or in additional css which is inside the customizer. Everything really for the theme is inside Customizer. Here’s some more information on how to use and where to look for things in Customizer

Lastly, that logo is just taking up a lot of real estate. For mobile I would, in my professional opinion, use a completely different logo or just the name in regular text and that rad logo with knife and fork