News Pro White Space/Gap Beneath Header in Mobile

[jvince81]

Hi folks,

Apologies if this has been answered already - I just spent the last hour searching the community forums, but couldn't find an answer. I'm using New Pro on my website and when the website goes into mobile mode, there is a massive white space underneath the header image. Is there a way to remove that huge chunk of white space?

https://www.xheadlines.com/

Thanks,
Joe

https://www.xheadlines.com/

[jvince81]

I reached out to StudioPress and they were able to address my concern by having me add the following to Appearance >> Customize >> Additional CSS:

@media only screen and (max-width: 1023px) {
    .site-header .wrap {
        padding: 0;
    }
}

@media only screen and (max-width: 600px) {
    .header-image .site-header .site-title a {
         background-size: cover !important;
    }
}

[Anita]

Did you resolve your issue? I do not see the white space you are describing. If not, what mobile device are you using?

---

Love coffee, chocolate and my Bella!

[jvince81]

Hi Anita,

Yes, my issue was resolved with help from the folks at StudioPress. This is the code that I inserted to solve the problem.

@media only screen and (max-width: 1188px) {
	.header-image .site-title > a {
        background-position: top !important;
				background-position: left !important;
        background-size: contain !important;
			min-height: 130px;
    }

@media only screen and (max-width: 1023px) {
	.header-image .site-title > a {
        background-position: top !important;
				background-position: left !important;
        background-size: contain !important;
			min-height: 130px;
    }

@media only screen and (max-width: 900px) {
	.header-image .site-title > a {
        background-position: top !important;
				background-position: left !important;
        background-size: contain !important;
			min-height: 101px;
    }
	
@media only screen and (max-width: 752px) {
	.header-image .site-title > a {
        background-position: top !important;
				background-position: left !important;
        background-size: contain !important;
			min-height: 94px;
    }

@media only screen and (max-width: 600px) {
	.header-image .site-title > a {
        background-position: top !important;
				background-position: left !important;
        background-size: contain !important;
			min-height: 54px;
    }

Regards,
Joe

[Author]

Posts