too much space between logo and slider

nickmanjohn · April 2016

Hi there, I am using the Betheme 'car rental' template. On the iPhone there is a lot of white space between the logo and the slider on the homepage (www.blufiremedia.com/passion). Also, when viewed on the mobile device - how can I take off the image below the logo and above the page title- e.g. when you click on the menu item who we are there is the diagonal blue line below the logo- i want this away so that the 'who we are' title in the blue background is moved up.

thanks for your help!

Nick

Albert · April 2016

Hi Nick,

1. You got such large empty space because you forgot to deactivate Right Top Bar under Theme options > Header & Subheader > Extras section.

2. Do you mean subheader section where page title is? If that's what you mean, you can do this under Theme options > Header & Subheader > Subheader section.

nickmanjohn · April 2016

Hi there thanks for the response. I got number 1 sorted however in respect of number 2 issue- the only way i was able to make the subheader disappear on the mobile phone layout was to go to: header > minimalist > and select minimalist ON. This makes the sub header disappear on the mobile however on the desktop it looks completely wrong (i have a screen shot of it at http://blufiremedia.com/passion/wp-content/uploads/2016/04/screenshot.png)

I have since changed the header back to what it was so the site displays properly for my client to view it on his desktop (i.e. the header is switched back from from 'minimalist | On' to 'Default | OFF') however the iPhone still has the issue with displaying the sub header as shown in this screenshot- http://blufiremedia.com/passion/wp-content/uploads/2016/04/screenshotWRONG.png but i really want it to appear as this screenshot http://blufiremedia.com/passion/wp-content/uploads/2016/04/screenshotCORRECT.png.

Hope you can help with this- basically it seems that I can get it to display correctly on a mobile but not a desktop and vice versa, depending on the settings i use, but I can't get them to appear on both platforms correctly at the same time!

Nick

nickmanjohn · April 2016

ps if you need my log in details for this i can send you them

charlsant · April 2016

Hi,

Was there any solution offered for the iphone white space under the header?

I am having a similiar issue.

Thanks,

Carlos.-

Albert · April 2016

In reference to 2nd, you can not use Minimalist header if you want to remove part of site on mobile only. So what exactly you want to do? Remove header background on mobile only? If that's what you mean, please turn off Minimalist header and send us link to page where from you want to remove this header.

nickmanjohn · April 2016

Hi there...

Minimalist is turned off and default is on. As it is, the site is perfect on all platforms except for the iPhone.

This image here- http://blufiremedia.com/passion/wp-content/uploads/2016/04/headerexamples-1.jpg will show you what I am looking to do (to remove that header highlighted in red). The address of that page is http://blufiremedia.com/passion/who-we-are/

thanks a lot!

Albert · April 2016

Please activate this header first because as we can see, it does not exist.

nickmanjohn · April 2016

Hi, the header is activated- I have checked this on my iPhone on both chrome and safari apps and the header (the section highlighted in red in this screenshot http://blufiremedia.com/passion/wp-content/uploads/2016/04/headerexamples-1.jpg) is appearing on the iPhone. It does NOT appear on other platforms i.e. on my iMac or even on the iPad, it ONLY appears on the iPhone- so I am looking to take that header (the section I have highlighted in red) away. The site as it is on desktop pc/mac is perfect, the only issue is on iPhone (and possibly android phones)

thanks

Albert · April 2016

Ok, we think that we got it finally. To remove this header background on mobile, please use the following css:

@media only screen and (max-width: 767px) {
    #Header_wrapper { background-image: none !important; }
}

nickmanjohn · April 2016

brilliant, thanks for this, however whilst the background has disappeared, there is a still a large space between the logo and the blue header with the text in it (http://blufiremedia.com/passion/wp-content/uploads/2016/04/emptyspace.jpg). Is there a way of taking the space completely out so the blue header bar is pushed up?

Thanks

Albert · April 2016

If above css does not work as you wish, please try the following css:

@media only screen and (max-width: 767px) {
    #Header_wrapper { background-image: none !important; min-height: 0 !important; }
}

nickmanjohn · April 2016

tired that too and unfortunately the gap between the logo and header is still there?

Albert · April 2016

If above css did not helped, then try below:

@media only screen and (max-width: 767px) {
    #Header { min-height: 0 !important; }
}

But if above css won't help as well, we suggest to remove all custom css's because we don't know what else might be the reason exactly in your case.

nickmanjohn · April 2016

perfect, it works, thank you for your help!!

Albert · April 2016

You're welcome!

oozye · November 2016

Hi, I have tried following this information on this page but I still have a too large gap between my mobile logo and my slider when viewing on mobile, please could you suggest something I could alter to achieve this effect,

http://doverwebdesigner.co.uk/testing/

Albert · November 2016

Hi,

We've checked your site. There is no space below logo but in the Revolution Slider please check your slider aspect ratio http://pasteboard.co/2eJCDr8qR.png

Thanks!

oozye · November 2016

Thankyou very much, all sorted now, awesome theme & support !

Albert · November 2016

You're welcome!

too much space between logo and slider

Comments