White Space in West Banner (container) on Mobile and Ipad

I have created a great site using West and am using full screen images.

However, when I test it on mobiles and ipad, a big bit of empty space comes up at the top, rather than the image with the header over it.

I tried to fix it with a javascript and css method recommended to another user but that stripped out the images entirely.

I’ve also tried using and removing the ‘image for width less than 1024’ in customise, but that makes no difference.

HELP, please!

My site is
http://pd2.abitofsupport.co.uk/

Thanks very much

Hello there,

Please try to apply the following CSS code into your site’s additional CSS option which resides under the Appearance > Customize > Additional CSS.


@media only screen and (max-width:1024px) {
	
  .site-header, 
	.site-header.has-header {
	   position: absolute !important;
	}	
	
}

Regards,
Kharis

Thank you for this, it gets rid of the white space.

However on mobiles the site description is superimposed over the call to action buttons. Also there is a three line menu icon which is unnecessary as this is a single page site only.

As a reminder, this is the site

http://pd2.abitofsupport.co.uk/

Thanks

Hello there,

Please add the following CSS code:


@media only screen and (max-width:600px) {
  
  .header-info {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);    
  }
  
}

To remove the mobile navigation, use this code:


.mobile-nav {
  display: none;
}


Regards,
Kharis