Mobile View: Gap between header and text logo too big.


I’m using the Illdy theme and really love it, however, I’m having a couple of problems on my mobile view that I can’t figure out how to fix - I had a flick through previous posts and can’t seem to find a fix, so I apologise if there is one, please link me to it if there is.
Firstly on Android and iPhones, on all my pages bar my homepage and my blog (main page) there’s a massive white gap between my header and main page text, is there a way to reduce/remove this?
And secondly, just on phones (seems to work fine on my Pixel), my logo text is on two lines, is there a way to make this fit on one line, or if it has to be on two to break it up so it reads better?
My website is

Thanks in advance,


hey there

Hope you are having a good day and thank you for your question :slight_smile:

  1. sorry but can’t reproduce this problem, can you tell me the model of your phone?
  2. Please add this CSS in appearance - customize - additional CSS

@media only screen and (max-width: 992px) {
#header .top-header .header-logo {
font-size: 33px;

Colorlib Support Team


  1. Of course. So it’s happening on my Google Pixel 3XL and my boyfriend’s iPhone X.
  2. Thank you so much. :smiley:

Hi there

Ok, I was not able to replicate it but let’s try this solution, please add this code in appearance > customize > additional CSS:

#header.header-front-page {
background-image: url( !important;

Hi again,

That hasn’t worked I’m afraid.

I really appreciate you trying though,

(P.S. No worries if you can’t fix it, it might just have to be something that I learn to live with).

Hi there

Thank you for being so patient :slight_smile:
Well, the problem for me is that I can’t replicate it here on my phone or in the browsers simulator, that’s the reason I can’t generate proper CSS


That’s okay, don’t worry. The logo was the main issue anyway. Thank you for your time and help, it’s much appreciated. ?

You are most welcome :slight_smile:

Have a nice weekend