Big Space after Header on Mobile – Streamline

[kilerb]

Hey there! I'm using the Streamline theme for this site.. Just checked it out on my iPhone and for some reason, right after the header, there's a very large white space. I can't seem to figure out what's causing it. Any idea? Site is in the form... Thanks a lot!

http://www.rodellegrazie.com

[Victor Font]

The space is coming from .header-image .site-title a. You have the min-height set to 445px. You need to change that in the media queries.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[marybaum]

The header is a horizontal graphic, and you have the background size set to contain:

@media only screen and (max-width: 767px) {

	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}
	
	.entry-meta {
		display: none;
	}
	
	.entry-footer .entry-meta {
		display: block;
	}
	
	.header-image .site-header .site-title a {
		background-size: contain !important;
	}

With an !important no less.

You're probably aware that background-size: contain; is going to fit the whole graphic into the space one way or the other, proportionality be dumped.

Background-size: cover; would cover the entire area with a fraction of the graphic, which is no good either.

What I would do in your shoes is make a different version of that graphic that is vertical - show more of Rosie's torso, make the purple band behind her taller, stack both the purple type and the white type - until you've accommodated that basic shape.

If you use Chrome's dev tools (command-option-I or Windows-alt-I depending on your operating system) you can check your proportions in your desktop browser against a variety of devices, both iOS and Android, as you see fit.

FWIW, you can also add custom sizes. For instance, I keep a size for my 27" Thunderbolt so I can check the big view on my laptop when I travel. And if either of us worked with a sports team and needed to develop for a Jumbotron ... well, there we go!

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[kilerb]

Hi Marybaum 🙂 Thanks so much for taking the time to give me all that info! I really appreciate it. So I tried to make a quick logo to test it out. I placed it here... http://www.rodellegrazie.com/images/mobileheader.jpg

I think I'm doing something wrong though. I've tried to place the header replacement code in the mobile area... But it seems to not work. I'm probably doing it wrong. This is what I put.... What can I change to get it to use the new header image? Thanks!

@media only screen and (max-width: 767px) {

	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}
	
	.entry-meta {
		display: none;
	}
	
	.entry-footer .entry-meta {
		display: block;
	}
	
	.header-image .site-header .site-title a {
		/* background-size: contain !important; */
		background: url(http://www.rodellegrazie.com/images/mobileheader.jpg) no-repeat;
	} 
	
	.responsive-menu {
		display: none;
	}
	
	#responsive-menu-icon {
		display: block;
	}
	
	background: url(http://www.rodellegrazie.com/images/mobileheader.jpg) no-repeat;

[Author]

Posts