Mobile Site too wide – large white space on right

[kenziejoy]

I'm using the Education pro theme and it is responsive...but there is a strange white space to the side of the content. I can't figure out how to get rid of it. It might have been something I did or perhaps it was always like that.

When you try to go to the mobile site - sometimes my phone automatically zooms in so you can't tell the space is there but if you slide over you can see it.

Any advice would be greatly appreciated.

http://www.everydayambassador.org

[Tom]

Hi there,
(remember to backup everything before making any changes)

This (the white space) isn't as obvious under emulation, and doesn't appear on my tablet, so some guesswork may be involved. (testing with iPhone 6). Do you have any mobile plugins active?

Style.css, line 192-197: try removing the max-width declaration.

p {
	padding: 0;
	line-height: 1.8;
	font-size: 16px;
	max-width: 90%;
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[carasmo]

on line 1015 in your style.css file you have:

.header-image .site-title > a {
	float: left;
	min-height: 60px;
	width:500px;
}

That combined with padding of 10% on the .wrap creates a horizontal scrollbar past at screen sizes under 561px. You can test this by resizing your browser. Touch devices don't show the scrollbar until you scroll in that direction, but having property with an explicit width set that is larger than any viewport under that will create the white space.

Your CSS is not like the original theme's default CSS and there is no media query that corrects this. You would need to use a media query as follows:

@media only screen and (max-width: 1023px) { 
	.site-description {
	    display: none!important
	}

	.site-header .site-title a {
	    background-position: 50%
	}

	.header-image .site-title > a {
	    float: none;
	    display: block;
	    margin-left: auto;
	    margin-right: auto;
	    width: 100%;
	}
}

Place this after all other media queries.

Then change this (lines 1009 - 1013):

.site-header .site-title a,
.site-header .site-title a:hover {
	color: #fff;
	background: url(http://everydayambassador.org/wp-content/uploads/2015/08/EA-Header-Logo_mobile_75h.png) no-repeat;
}

to this:

.site-header .site-title a {
	color: #fff;
	background: url(http://everydayambassador.org/wp-content/uploads/2015/08/EA-Header-Logo_mobile_75h.png) no-repeat;
}

:hover is used to change the behavior on :hover, if it's the same, you don't need this and it will make the image bounce on :hover when you are under the 1023 viewport width.

Remove this in the device specific -- user added -- media queries for old IOS sizes on lines 2591 - 2598 in your CSS.

	.site-header .site-title a,
	.site-header .site-title a:hover  {
		background: url("http://everydayambassador.org/wp-content/uploads/2015/11/EA-Logo_mobile-75px.png") no-repeat;
		height:80px;
		position: absolute;
        	left: 35%;
       		margin-right: -35%;
	}

You can remove.

---

Genesis Theme Customization and Help

[Author]

Posts