Mobile View Header Space Issue

Proweb2011 · February 2016

Hi

I am having trouble removing the white space on the mobile view BeTheme

here is a screenshot > http://profilebusiness.co.uk/responsive view.png

I have added the following to the Custom CSS:

body:not(.template-slider):not(.header-simple) #Header { min-height: 0 !important; }

and tried:

@media only screen and (max-width:768px) { body:not(.template-slider):not(.header-simple) #Header { min-height: 0 !important; } }

but the space still shows on the mobile view, please can you help

Kind Regards,

David

Proweb2011 · February 2016

it looks like the screenshot link was broken, here is another > http://profilebusiness.co.uk/responsiveview.png

Albert · February 2016

Hi,

please send us link to page where you got this empty space on mobile.

Proweb2011 · February 2016

Thank you for your prompt reply, here is the linkhttp://www.hallwoodassociates.com/site (this shows fine on destop, but large gap on mobileI have also set up a user accountU: bethemeP: betheme
Thank you for your helpKind Regards,David

andymargetts · February 2016

Hi

I am also experiencing the same issues and would be very interested in the fix as I have tried several custom CSS, some taken from the template sites without any success. My menu is also behaving oddly as it sits over the content rather than pushing it down

url is - http://test.amdevsites.x10host.com/cgi-bin/wordpress/

thanks Andy

Albert · February 2016

@ProWeb2011. You got this empty space because of 2 reasons:

1. Under Theme options > Header & Subheader > Extras section you forgot to removed "Top Bar Right" section.

2. You set 123px of logo height while logo can not be so large on mobile. You should wrap the css responsible for increasing logo size in @media only screen attributes. More details about it you can read on http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@anymargetts We can not open your site so we don't know what might be the reason in your case.

Proweb2011 · February 2016

Thank you, it is a little better.

Perfect on mobile landscape, but still a space on mobile portrait

Do you have a css to close the gap on mobile portrait, please

Kind Regards,

David

Albert · February 2016

@Proweb2011 What @media query you used exactly?

Proweb2011 · February 2016

This is my custom CSS

#Top_bar #logo { height: 123px !important; }
#Top_bar .menu > li > a span:not(.description) { line-height: 20px; padding: 105px 15px 5px 15px ; }
body:not(.template-slider):not(.header-simple) #Header { min-height: 0 !important; }
@media only screen
and (max-width : 320px) {
/* Styles */    #logo {
        width:100px;
    }
}

Proweb2011 · February 2016

I have also tried

@media only screen and (max-width: 320px)
{
        #Top_bar .top_bar_left {
                height: auto !important;
        }
}

but still space on mobile portrait

Albert · February 2016

The 1st line (css responsible for logo height) should be wrapped into @media query. This is what we meant for all the time. At this moment, it's out of it.

Proweb2011 · February 2016

Thank you, the mobile portrait issue is fixed, but now the desktop logo has shrunk

here is my custom CSS

@media only screen and (min-width: 960px) and (max-width: 1059px) {
#Top_bar #logo { height: 123px !important; }
#Top_bar .menu > li > a span:not(.description) { padding: 0 5px !important; }
}
#Top_bar .menu > li > a span:not(.description) { line-height: 20px; padding: 105px 15px 5px 15px ; }

Please could you tell me the correct CSS to make sure the logo increases in the @media on desktop view

Albert · February 2016

If the desktop logo has shrunk, you must increase max-width. You need to control it with min and max width attributes.

Proweb2011 · February 2016

Thank you, this was the answer:

@media only screen and (min-width: 1240px) {
#Top_bar #logo { height: 123px !important; }
}
#Top_bar .menu > li > a span:not(.description) { line-height: 20px; padding: 105px 15px 5px 15px ; }

***This has now been resolved*****

Albert · February 2016

You're welcome!

andymargetts · February 2016

I know the above has been tagged as solved but I'm still having issues with the header on mobile, the above fix didn't work for me, help...

http://test.amdevsites.x10host.com/cgi-bin/wordpress/

Albert · February 2016

@andymargetts What problem you still got exactly?

andymargetts · February 2016

when the site goes down to the mobile screen size (768) there is area below the menu that mean the header then fills almost half of the screen

Oliver_William · March 2016

I have got a similar problem. On mobile view below the header image a black bar appears. Moreover, the image is not properly scaled down but rather only a certain section of the image is visible on mobilie view. Can this be fixed? Thank you in advance!

Oliver_William · March 2016

www.william-law.ch

Albert · March 2016

@andymargetts As we see, it's because of your header's height. If you want, you can change it's height with the following css:

body:not(.template-slider):not(.header-simple) #Header { min-height: 200px !important; }

Mobile View Header Space Issue

Comments